highcharts-angular - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

lib/highcharts-chart.component.d.ts

@@ -1,2 +0,3 @@
-import { ElementRef, EventEmitter, OnDestroy, NgZone, OnChanges, SimpleChanges } from '@angular/core';
+import type { OnChanges, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, NgZone, SimpleChanges } from '@angular/core';
 import type * as Highcharts from 'highcharts';
@@ -13,3 +14,3 @@ import type HighchartsESM from 'highcharts/es-modules/masters/highcharts.src';
     runOutsideAngular: boolean;
-    options: Highcharts.Options;
+    options: Highcharts.Options | HighchartsESM.Options;
     update: boolean;
@@ -16,0 +17,0 @@ updateChange: EventEmitter<boolean>;

package.json

 {
   "name": "highcharts-angular",
   "description": "Highcharts component for Angular.",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "license": "SEE LICENSE IN <LICENSE>",
@@ -6,0 +6,0 @@ "author": "Black Label <[e-mail]> (http://blacklabel.pl)",

README.md

 # Highcharts Angular
-Official minimal Highcharts wrapper for Angular
+Official minimal Highcharts integration for Angular
 
@@ -10,2 +10,3 @@ ## Table of Contents
     4. [Angular Universal - SSR](#angular-universal--SSR)
+    5. [Angular Elements and useHTML](#angular-elements-and-usehtml)
 2. [Options details](#options-details)
@@ -164,2 +165,54 @@ 3. [Chart instance](#chart-instance)
 
+### 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.push('translation-element');
+  Highcharts.AST.allowedAttributes.push('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<TranslationComponent> =
+      document.createElement(translationElementTag);
+
+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
@@ -392,2 +445,3 @@
 * [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/karolkolodziej/highcharts-angular-elements)
 
@@ -394,0 +448,0 @@ ## Changing the Component

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49052

increased by3.23%

Lines of code

238

increased by0.42%

Number of lines in readme file

508

increased by11.89%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes