Angular PrimeNG SplitButton事件

Angular PrimeNG是一个与angular一起使用的框架，用于创建具有强大风格的组件，这个框架非常容易使用，用于制作响应式网站。

在这篇文章中，我们将看到如何在angular primeNG中使用SplitButton事件。SplitButton组件用于使一个按钮成为下拉菜单。

Angular PrimeNG SplitButton事件属性：

onClick。当主按钮被点击时，它用于执行一个回调函数。
onDropdownClick。它用于在点击下拉按钮时执行一个回调函数。

创建Angular应用程序和模块安装。

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步：现在，我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

npm install primeng --save
npm install primeicons --save

项目结构：安装成功后，将出现以下项目结构。

Angular PrimeNG SplitButton事件

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

实例1：本实例描述了Angular PrimeNG中Split Button Components的onClick事件。

app.component.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

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

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 { }

输出:

Angular PrimeNG SplitButton事件

示例2：本示例描述了Angular PrimeNG中Split Button Components的onDropdownClick事件。

app.component.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

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

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 { }

输出:

Angular PrimeNG SplitButton事件