Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we are going to learn Angular PrimeNG ChartModel Events.
The ChartModel Component is used to create different types of charts and is based on Chart.js, an open-source HTML5-based charting library. The ChartModel Events are called when some action is being performed on the component, appropriate action can be taken.
Angular PrimeNG ChartModel Events:
- onDataSelect(event): This event is triggered when we click on a data section of the chart.
Syntax:
<p-chart
type="pie"
[data]="basicData"
(onDataSelect)="handleClick($event)">
</p-chart>Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command:
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like the following:
Steps to run the application: Run the below command to see the output
ng serve --open
Example 1: Below is the example code that illustrates the use of Angular PrimeNG ChartModel Events. In the following example, we are showing a toast on data selection.
app.component.html:
<h1 style="color: green; text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG ChartModel Events</h3>
<p-toast></p-toast>
<p-chart
type="pie"
width="350px"
[data]="basicData"
(onDataSelect)="handleClick($event)">
</p-chart>
|
app.component.ts:
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
@Component({ selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
}) export class AppComponent { basicData: any;
basicOptions: any;
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) {}
ngOnInit() {
this.basicData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
label: "2020",
data: [65, 59, 80, 81, 56, 55],
tension: 0.4,
backgroundColor: [
"#FF6371",
"#36A2EB",
"#FFCE45",
"#ff6200",
"#00ffbf",
"#9900ff"
],
borderColor: "#42A5F5"
}
]
};
this.basicOptions = {
title: {
display: true,
text: "Article Views",
fontSize: 32,
position: "top"
}
};
}
handleClick(event) {
this.messageService.add({
severity: "success",
summary: "GeeksforGeeks",
detail: "Data Item Clicked"
});
}
} |
app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ToastModule } from "primeng/toast";
import { RippleModule } from "primeng/ripple";
import { ImageModule } from "primeng/image";
import { ChartModule } from "primeng/chart";
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule,
ImageModule,
ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}) export class AppModule {} |
Output:
Example 2: Below is another example code that illustrates the use of Angular PrimeNG ChartModel Events. In the following example, we will show the details of the selected data in the toast.
app.component.html:
<h1 style="color: green; text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG ChartModel Events</h3>
<p-toast></p-toast>
<p-chart
type="pie"
width="350px"
[data]="basicData"
(onDataSelect)="handleClick($event)">
</p-chart>
|
app.component.ts:
import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
import { PrimeNGConfig } from "primeng/api";
@Component({ selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
}) export class AppComponent { basicData: any;
basicOptions: any;
constructor(
private messageService: MessageService,
private primengConfig: PrimeNGConfig
) {}
ngOnInit() {
this.basicData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
label: "2020",
data: [65, 59, 80, 81, 56, 55],
tension: 0.4,
backgroundColor: [
"#FF6371",
"#36A2EB",
"#FFCE45",
"#ff6200",
"#00ffbf",
"#9900ff"
],
borderColor: "#42A5F5"
}
]
};
this.basicOptions = {
title: {
display: true,
text: "Article Views",
fontSize: 32,
position: "top"
}
};
}
handleClick(event) {
this.messageService.add({
severity: "success",
summary: "GeeksforGeeks",
detail: "Data Item ClickedIndex:\t" + event.element.index
});
console.log(event);
}
} |
app.module.ts:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { ToastModule } from "primeng/toast";
import { RippleModule } from "primeng/ripple";
import { ImageModule } from "primeng/image";
import { ChartModule } from "primeng/chart";
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
ToastModule,
ButtonModule,
RippleModule,
FormsModule,
ImageModule,
ChartModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
}) export class AppModule {} |
Output:
Reference: https://primefaces.org/primeng/chart