# Angular

> Angular 컴포넌트로 82chart 쓰기.

Source: https://82chart.com/docs/angular/

```sh
npm i @82chart/core @82chart/angular
```

```js
import { Component } from '@angular/core';
import { Chart82Component } from '@82chart/angular';
import type { ChartData, ChartOptions, ChartPoint } from '@82chart/core';

@Component({
  selector: 'app-sales',
  standalone: true,
  imports: [Chart82Component],
  template: `<chart-82 type="bar" [data]="data" [options]="options" (pointClick)="onPoint($event)"></chart-82>`,
})
export class SalesComponent {
  data: ChartData = {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
  };
  options: Partial<ChartOptions> = { title: '월별 매출', unit: '원' };
  onPoint(p: ChartPoint) { console.log(p); }
}
// angular.json → "styles": ["node_modules/@82chart/core/dist/styles.css"]
```

- standalone 컴포넌트 `<chart-82 [type] [data] [options] [theme] (ready) (pointClick)>`.
- `(pointClick)` 은 점·막대·조각을 눌렀을 때, `(ready)` 는 차트 인스턴스를 줍니다.
- `data` 는 새 객체를 넘길 때 다시 그립니다.
- Angular 17 이상.