Com o lançamento da versão angular 14, componentes autônomos foram introduzidos e o NgModule tornou-se opcional; facilitando uma nova forma de construir e estruturar a base de código.

Neste artigo, criaremos um gráfico e veremos como usar e integrar componentes autônomos angulares junto com o wrapper oficial Highcharts Angular .

Vamos começar

Para criar um projeto com a versão mais recente do Angular, para iniciantes, atualize o pacote angular-cli com os seguintes comandos:
npm uninstall -g @angular/cli
npm install -g @angular/cli@latest

Para este projeto, estamos usando:

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

• Nó: 14.17.0
• npm 8.3.1
• Angular CLI: 14.0.2.

1. Se você não estiver familiarizado com esse tipo de ambiente, a documentação oficial do Angular descreve como configurar um ambiente de trabalho local e mais sobre o componente autônomo .

2. Para instalar highcharts-angulara biblioteca Highcharts execute a seguinte instrução: npm install highcharts-angular --save.

3. Para importar o pacote, vá para o app.module.tsarquivo e importe o módulo HighchartsChartModuledo highcharts-angularpacote.

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

5. Estamos declarando app.compoent.tscomo um componente autônomo e importando o HighchartsChartModulearray imports interno em vez de NgModule (opcional). Dependências de nível de aplicativo, como rotas, configuração de injeção de dependência em main.ts e nível de componente em app.component.tsou qualquer outro 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);

Sinta-se à vontade para compartilhar seus pensamentos e perguntas nos comentários abaixo.

Confira nosso blog e saiba mais sobre as melhores dicas para usar o Highcharts.

Autor: Haroon Ansari

Haroon Ansari é um engenheiro de ciência da computação. Ele tem muitos anos de experiência em javascript, Angular e .NET. Ele adora visualização de dados e contribui para projetos de código aberto. Siga Haroon no Twitter @haroonansari1 e LinkedIn