Angular PrimeNG SplitButton Events
Angular PrimeNG is a framework used with angular to create components with great styling this framework is very easy to use and is used to make responsive websites.
In this article, we will see how to use SplitButton Events in angular primeNG. The SplitButton component is used to make a button a dropdown.
Angular PrimeNG SplitButton Events Properties:
- onClick: It is used to execute a callback function when the main button is clicked.
- onDropdownClick: It is used to execute a callback function when the dropdown button is clicked.
Creating Angular application & Module Installation:
Step 1: To create an angular app, you need to install the angular command line interface through the npm command:
npm install -g angular-cli
Step 2: Now, we will create an angular project:
ng new project_name
Step 3: After creating your angular project, move into the folder to perform different operations:
cd project_name
Step 4: After creating the Angular application, Install the required module using the following command:
npm install primeng --save npm install primeicons --save
Project Structure: After successful installation, the following project structure will appear:
Step to Run Application: Run the application using the following command from the root directory of the project:
ng serve --open
Example 1: This example describes the onClick event in Split Button Components in Angular PrimeNG.
- app.component.html
HTML
< div style = "margin:100px; text-align: center;" > < h1 style = "color: green" > w3wiki </ h1 > < h3 > Angular PrimeNG SplitButton Events </ h3 > < br /> < p-splitButton label = "Beginner for Beginner" (onClick)="show()" styleClass = "p-button-raised p-button-success" [model]="gfg"> </ p-splitButton > < p-messages ></ p-messages > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; import { MenuItem } from 'primeng/api' ; import { MessageService } from 'primeng/api' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , providers: [MessageService], }) export class AppComponent { constructor(private messageService: MessageService) { } gfg: MenuItem[] = [ { label: 'Course 1' , icon: 'pi pi-book' }, { separator: true }, { label: 'Course 2' , icon: 'pi pi-book' }, { separator: true }, { label: 'Course 3' , icon: 'pi pi-book' }, ]; show() { this .messageService.add({ severity: "success" , summary: "Split Button Clicked" , }); } } |
- app.module.ts
Javascript
import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import { SplitButtonModule } from 'primeng/splitbutton' ; import { MessagesModule } from 'primeng/messages' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SplitButtonModule, MessagesModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: This example describes the onDropdownClick event in Split Button Components in Angular PrimeNG.
- app.component.html
HTML
< div style = "margin:100px; text-align: center;" > < h1 style = "color: green" > w3wiki </ h1 > < h3 > Angular PrimeNG SplitButton Events </ h3 > < br /> < p-messages ></ p-messages > < p-splitButton label = "Beginner for Beginner" (onDropdownClick)="show()" styleClass = "p-button-raised p-button-success" [model]="gfg"> </ p-splitButton > </ div > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; import { MenuItem } from 'primeng/api' ; import { MessageService } from 'primeng/api' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , providers: [MessageService], }) export class AppComponent { constructor(private messageService: MessageService) { } gfg: MenuItem[] = [ { label: 'Course 1' , icon: 'pi pi-book' }, { separator: true }, { label: 'Course 2' , icon: 'pi pi-book' }, { separator: true }, { label: 'Course 3' , icon: 'pi pi-book' }, ]; show() { this .messageService.add({ severity: "warn" , summary: "Split Button Dropdown Arrow is Clicked" , }); } } |
- app.module.ts
Javascript
import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { AppComponent } from './app.component' ; import { SplitButtonModule } from 'primeng/splitbutton' ; import { MessagesModule } from 'primeng/messages' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SplitButtonModule, MessagesModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Reference: https://primefaces.org/primeng/splitbutton
Contact Us