Con el lanzamiento de la versión angular 14, se introdujeron componentes independientes y NgModule se convirtió en opcional; facilitando una nueva forma de construir y estructurar el código base.

En este artículo, crearemos un gráfico y veremos cómo usar e integrar componentes angulares independientes junto con el contenedor angular oficial de Highcharts .

Empecemos

Para crear un proyecto con la última versión de Angular, para empezar, actualice el paquete angular-cli con los siguientes comandos:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Para este proyecto, estamos utilizando:

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

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

1. Si no está familiarizado con este tipo de entorno, la documentación oficial de Angular describe cómo configurar un espacio de trabajo de entorno local y más información sobre el componente independiente .

2. Para instalar highcharts-angularla biblioteca de Highcharts, ejecute las siguientes instrucciones: npm install highcharts-angular --save.

3. Para importar el paquete, vaya a app.module.tsarchivo e importe el módulo HighchartsChartModuledel highcharts-angularpaquete.

4. Para crear gráficos de Highcharts, instale Highcharts: npm install highcharts --save.

5. Estamos declarando app.compoent.tscomo un componente independiente e importando la HighchartsChartModulematriz de importaciones internas en lugar de NgModule (opcional). Dependencias a nivel de aplicación, como rutas, configuración de inyección de dependencia en main.ts y nivel de componente en app.component.tso cualquier otro 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);

Siéntase libre de compartir sus pensamientos y preguntas en los comentarios a continuación.

Consulte nuestro blog y obtenga más información sobre los mejores consejos para usar Highcharts.

Autor: Haroon Ansari

Haroon Ansari es ingeniero informático. Tiene muchos años de experiencia en javascript, Angular y .NET. Le encanta la visualización de datos y contribuye a proyectos de código abierto. Siga a Haroon en Twitter @haroonansari1 y LinkedIn