Avec la sortie de la version angulaire 14, des composants autonomes ont été introduits et NgModule est devenu facultatif ; faciliter une nouvelle façon de construire et de structurer la base de code.

Dans cet article, nous allons créer un graphique et voir comment utiliser et intégrer des composants angulaires autonomes avec le wrapper officiel Highcharts Angular .

Commençons

Pour créer un projet avec la dernière version d'Angular, pour commencer, mettez à jour le package angular-cli avec les commandes suivantes :
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Pour ce projet, nous utilisons :

• Angulaire 14.
• Highcharts V10.1.0.
• Highcharts-Angular .

• Nœud : 14.17.0
• npm 8.3.1
• CLI angulaire : 14.0.2.

1. Si vous n'êtes pas familier avec ce type d'environnement, la documentation officielle d'Angular décrit comment configurer un espace de travail d'environnement local et en savoir plus sur le composant autonome .

2. Pour installer highcharts-angularet la bibliothèque Highcharts, exécutez l'instruction suivante : npm install highcharts-angular --save.

3. Pour importer le package, accédez au app.module.tsfichier et importez le module HighchartsChartModuleà partir du highcharts-angularpackage.

4. Pour créer des graphiques Highcharts, installez Highcharts : npm install highcharts --save.

5. Nous déclarons app.compoent.tsen tant que composant autonome et importons le HighchartsChartModuletableau d'importations à l'intérieur au lieu de NgModule (facultatif). Dépendances au niveau de l'application telles que les routes, l'injection de dépendance configurée dans le main.ts et le niveau du composant dans app.component.tsou tout autre composant.

@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);

N'hésitez pas à partager vos réflexions et questions dans les commentaires ci-dessous.

Consultez notre blog et découvrez les meilleurs conseils pour utiliser Highcharts.

Auteur : Haroon Ansari

Haroon Ansari est ingénieur en informatique. Il a de nombreuses années d'expérience en javascript, Angular et .NET. Il aime la visualisation de données et contribue à des projets open source. Suivez Haroon sur twitter @haroonansari1 et LinkedIn