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:

Project Structure

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">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG SplitButton Events
    </h3>
    <br />
    <p-splitButton
        label="Geeks for Geeks"
        (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">
        GeeksforGeeks
    </h1>
    <h3>
        Angular PrimeNG SplitButton Events
    </h3>
    <br />
    <p-messages></p-messages>
    <p-splitButton
        label="Geeks for Geeks"
        (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