Angular PrimeNG Accordion事件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做漂亮的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解Angular PrimeNG中Accordion组件的事件。

Accordion组件用于在标签中显示一部分自定义的内容。

Accordion Events:

onOpen: 它是一个回调函数，当一个标签被打开时被调用。
onClose。当活动标签通过点击其标题而关闭时，回调函数被调用。

创建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 Accordion事件

Project Structure

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

ng serve --open

例子1：这个例子描述了Angular PrimeNG onOpen Accordion Event。

app.component.html

<div style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Accordion Events</h3>
    <p-accordion (onOpen)="open()">
        <p-accordionTab header="Header 1">
            Content 1
        </p-accordionTab>
        <p-accordionTab header="Header 2">
            Content 2
        </p-accordionTab>
    </p-accordion>
    <p-messages></p-messages>
</div>

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 { AccordionModule } from 'primeng/accordion';
import { MessagesModule } from 'primeng/messages';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AccordionModule,
        MessagesModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(private messageService: MessageService) { }
    open() {
        this.messageService.add({ 
            severity: "success", 
            summary: "Tab Opened" 
        });
    }
}

输出:

Angular PrimeNG Accordion事件

onOpen Accordion事件

例子2：这个例子描述了Angular PrimeNG onClose Accordion Event.。

app.component.html

<div style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Accordion Events</h3>
    <p-accordion (onClose)="close()">
        <p-accordionTab header="Header 1">
            Content 1
        </p-accordionTab>
        <p-accordionTab header="Header 2">
            Content 2
        </p-accordionTab>
    </p-accordion>
    <p-messages></p-messages>
</div>

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 { AccordionModule } from 'primeng/accordion';
import { MessagesModule } from 'primeng/messages';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AccordionModule,
        MessagesModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
  
    constructor(private messageService: MessageService) { }
  
    close() {
        this.messageService.add({ 
            severity: "warn", 
            summary: "Tab Closed" 
        });
    }
}

输出:

Angular PrimeNG Accordion事件