Con il rilascio della versione angolare 14, sono stati introdotti componenti autonomi e NgModule è diventato opzionale; facilitare un nuovo modo di costruire e strutturare la base di codice.

In questo articolo creeremo un grafico e vedremo come utilizzare e integrare i componenti angolari autonomi insieme al wrapper angolare Highcharts ufficiale .

Iniziamo

Per creare un progetto con l'ultima versione di Angular, per cominciare aggiorna il pacchetto angular-cli con i seguenti comandi:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Per questo progetto stiamo utilizzando:

• Angolare 14.
• Grafici alti V10.1.0.
• Highcharts-Angular .

• Nodo: 14.17.0
• npm 8.3.1
• CLI angolare: 14.0.2.

1. Se non si ha familiarità con questo tipo di ambiente, la documentazione ufficiale di Angular descrive come configurare un'area di lavoro dell'ambiente locale e ulteriori informazioni sul componente autonomo .

2. Per installare highcharts-angulare la libreria Highcharts eseguire le seguenti istruzioni: npm install highcharts-angular --save.

3. Per importare il pacchetto vai su app.module.tsfile e importa il modulo HighchartsChartModuledal highcharts-angularpacchetto.

4. Per creare grafici Highcharts, installare Highcharts: npm install highcharts --save.

5. Stiamo dichiarando app.compoent.tscome componente autonomo e importando l' HighchartsChartModulearray inside imports invece di NgModule (facoltativo). Dipendenze a livello di applicazione come percorsi, configurazione dell'iniezione di dipendenza in main.ts e livello di componente in app.component.tso qualsiasi altro componente.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HighchartsChartModule],
})

import './polyfills';
import {
  bootstrapApplication
} from '@angular/platform-browser';
import {
  AppComponent
} from './app/app.component';

bootstrapApplication(AppComponent);

Sentiti libero di condividere i tuoi pensieri e le tue domande nei commenti qui sotto.

Controlla il nostro blog e scopri di più sui migliori consigli per utilizzare Highcharts.

Autore: Haroon Ansari

Haroon Ansari è un ingegnere informatico. Ha molti anni di esperienza in javascript, Angular e .NET. Ama la visualizzazione dei dati e contribuisce a progetti open source. Segui Haroon su Twitter @haroonansari1 e LinkedIn