Angular PrimeNG面板事件

Angular PrimeNG是一个开源框架，拥有丰富的本地Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解Angular PrimeNG中面板组件的事件。

面板组件允许我们制作一个包含头和一些与该头相关的内容的元素。

Panel Events:

onBeforeToggle:在面板内容被切换前调用的回调函数。
onAfterToggle。在面板内容被切换后调用的回调函数。

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

Project Structure

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

ng serve --open

例子1：这个例子描述了Angular PrimeNG 面板事件。

app.component.html

<div style="margin:50px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Panel Events</h3>
    <p-panel header="DSA Self Paced Course" 
        (onBeforeToggle)="show()" 
        (onAfterToggle)="show2()" [toggleable]="true">
        <p>
            Most popular course on DSA trusted by 
            over 75,000 students! Built with years of
            experience by industry experts and gives 
            you a complete package of video lectures,
            practice problems, quizzes, discussion 
            forums and contests. Start Today!
        </p>
    </p-panel>
    <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 { PanelModule } from 'primeng/panel';
import { MessagesModule } from 'primeng/messages';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        PanelModule,
        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) { }
  
    show() {
        this.messageService.add({ 
            severity: "success", 
            summary: "Before Panel Toggle" 
        });
    }
    show2() {
        this.messageService.add({ 
            severity: "warn", 
            summary: "After Panel Toggle" 
        });
    }
}

输出:

Angular PrimeNG面板事件

Panel Events

实例2 。这个例子描述了Angular PrimeNG的面板事件。

app.component.html

<div style="margin:150px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Panel Events</h3>
    <p-panel header="Geeks for Geeks" 
        (onBeforeToggle)="show()" 
        (onAfterToggle)="show2()" 
        [toggleable]="true">
        <p>Hi Geek !! Welcome to GFG.</p>
    </p-panel>
</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 { PanelModule } from 'primeng/panel';
import { MessagesModule } from 'primeng/messages';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        PanelModule,
        MessagesModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [],
})
export class AppComponent {
    show() {console.log("Before Panel Toggle")}
    show2() {console.log("After Panel Toggle")}
}

输出:

Angular PrimeNG面板事件