From 5c3e93de137be22fc8ea9ac760e1a0e525096f94 Mon Sep 17 00:00:00 2001 From: Jon Andoni CAstelo Date: Fri, 19 Apr 2024 17:16:55 +0200 Subject: [PATCH 1/6] docs: angular elements and usehtml --- README.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/README.md b/README.md index d380bdb..b8f5229 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Official minimal Highcharts integration for Angular 2. [Installing](#installing) 3. [Hello world demo](#hello-world-demo) 4. [Angular Universal - SSR](#angular-universal--SSR) + 5. [Angular Elements and useHTML](#angular-elements-and-usehtml) 2. [Options details](#options-details) 3. [Chart instance](#chart-instance) 4. [Highcharts instance details](#highcharts-instance-details) @@ -160,6 +161,64 @@ export class AppComponent { > ``` +## Angular Elements and useHTML + +First, install angular elements: + +```cli +npm install @angular/elements --save +``` + +Include in main.ts file your element tag inside allowedTags and [element properties](https://angular.io/guide/elements#mapping) inside allowedAttributes: + +```ts +if (Highcharts && Highcharts.AST) { + Highcharts.AST.allowedTags = [ + ...Highcharts.AST.allowedTags, + 'translation-element', + ]; + Highcharts.AST.allowedAttributes = [ + ...Highcharts.AST.allowedAttributes, + 'translation-key', + ]; +} +``` + +Define your element in the constructor of the component that will use it: + +```ts +private defineTranslationElement() { + if (isNil(customElements.get('translation-element'))) { + const translationElement = createCustomElement(TranslationComponent, { + injector: this.injector, + }); + customElements.define('translation-element', translationElement); + } +} +``` + +Then, create the element, set properties and use it in the chart: + +```ts +const translationEl: NgElement & WithProperties = + document.createElement(translationElementTag) as any; + +translationEl.setAttribute( + 'translation-key, + 'shared.title' +); + +const chartOptions: Highcharts.Options = { + title: { + text: translationEl.outerHTML, + useHTML: true, + }, + xAxis: [ + ... +``` + +For a more detailed view take a look at the [Online Examples - Angular Elements and useHTML](#online-examples) + ## Options details | Parameter | Type | Required | Defaults | Description | @@ -387,6 +446,7 @@ Contains the chart component that creates Highcharts chart. * [Applying a custom plugin/wrap](https://stackblitz.com/edit/highcharts-angular-a-custom-plugin) * [Property `XXX` does not exist on type `YYY`](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist) * [Using portals to render an angular component within a chart](https://stackblitz.com/edit/highcharts-angular-portals) +* [Angular Elements and useHTML](https://stackblitz.com/~/github.com/jonancastelo/highcharts-angular-elements) ## Changing the Component From 70c774094eccfd75bd0a09fdf56a4597ae6f3c3e Mon Sep 17 00:00:00 2001 From: Jon Andoni CAstelo Date: Fri, 19 Apr 2024 17:22:44 +0200 Subject: [PATCH 2/6] docs: angular elements as subtitle --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b8f5229..ef0ab68 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,7 @@ export class AppComponent { > ``` -## Angular Elements and useHTML +### Angular Elements and useHTML First, install angular elements: From 8b4acdabc45b6e00c0611d929d3f708b0eb94156 Mon Sep 17 00:00:00 2001 From: jonancastelo <167442128+jonancastelo@users.noreply.github.com> Date: Mon, 22 Apr 2024 15:35:39 +0200 Subject: [PATCH 3/6] docs: add single quote to translation-key MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Karol Kołodziej <57004120+karolkolodziej@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ef0ab68..83bda50 100644 --- a/README.md +++ b/README.md @@ -204,7 +204,7 @@ const translationEl: NgElement & WithProperties = document.createElement(translationElementTag) as any; translationEl.setAttribute( - 'translation-key, + 'translation-key', 'shared.title' ); From 00310971a6c9c0017d6f078dc23e4351886fbd75 Mon Sep 17 00:00:00 2001 From: jonancastelo <167442128+jonancastelo@users.noreply.github.com> Date: Mon, 22 Apr 2024 15:41:29 +0200 Subject: [PATCH 4/6] docs: create fork of repo to have a better control MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Karol Kołodziej <57004120+karolkolodziej@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 83bda50..c3c3e48 100644 --- a/README.md +++ b/README.md @@ -446,7 +446,7 @@ Contains the chart component that creates Highcharts chart. * [Applying a custom plugin/wrap](https://stackblitz.com/edit/highcharts-angular-a-custom-plugin) * [Property `XXX` does not exist on type `YYY`](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist) * [Using portals to render an angular component within a chart](https://stackblitz.com/edit/highcharts-angular-portals) -* [Angular Elements and useHTML](https://stackblitz.com/~/github.com/jonancastelo/highcharts-angular-elements) +* [Angular Elements and useHTML](https://stackblitz.com/~/github.com/karolkolodziej/highcharts-angular-elements) ## Changing the Component From 395c37e634c830590beb353ebe962a3157c46c23 Mon Sep 17 00:00:00 2001 From: Jon Andoni CAstelo Date: Mon, 22 Apr 2024 15:44:27 +0200 Subject: [PATCH 5/6] docs: use push to add allowedAttributes and allowedTags --- README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c3c3e48..e2351ac 100644 --- a/README.md +++ b/README.md @@ -173,14 +173,8 @@ Include in main.ts file your element tag inside allowedTags and [element propert ```ts if (Highcharts && Highcharts.AST) { - Highcharts.AST.allowedTags = [ - ...Highcharts.AST.allowedTags, - 'translation-element', - ]; - Highcharts.AST.allowedAttributes = [ - ...Highcharts.AST.allowedAttributes, - 'translation-key', - ]; + Highcharts.AST.allowedTags.push('translation-element'); + Highcharts.AST.allowedAttributes.push('translation-key'); } ``` From 961ace44a0e2c06b19ca278c463d3b1078d8876b Mon Sep 17 00:00:00 2001 From: Jon Andoni CAstelo Date: Tue, 23 Apr 2024 15:45:09 +0200 Subject: [PATCH 6/6] docs: remove any casting for angular elements --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e2351ac..d37e6bc 100644 --- a/README.md +++ b/README.md @@ -195,7 +195,7 @@ Then, create the element, set properties and use it in the chart: ```ts const translationEl: NgElement & WithProperties = - document.createElement(translationElementTag) as any; + document.createElement(translationElementTag); translationEl.setAttribute( 'translation-key',