События панели Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы познакомимся с компонентом Events of Panel в Angular PrimeNG.
Компонент панели позволяет нам создать элемент, содержащий заголовок и некоторый контент, связанный с этим заголовком.
Панельные события:
- onBeforeToggle: функция обратного вызова, вызываемая перед переключением содержимого панели.
- onAfterToggle: функция обратного вызова, вызываемая после переключения содержимого панели.
Создание приложения Angular и установка модуля:
Шаг 1: Чтобы создать приложение angular, вам необходимо установить интерфейс командной строки angular с помощью команды npm.
npm install -g angular-cli
Шаг 2: Теперь мы создадим угловой проект.
ng new project_name
Шаг 3: После создания углового проекта перейдите в папку для выполнения различных операций.
cd project_name
Шаг 4: После создания приложения Angular установите необходимый модуль с помощью следующей команды:
npm install primeng --save npm install primeicons --save
Структура проекта: после выполнения команд, упомянутых в предыдущих шагах, он будет выглядеть следующим образом:
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
ng serve --open
Пример 1: В этом примере описываются события панели Angular PrimeNG.
- app.component.html
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
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 { 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:
Javascript
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" }); } } |
Выход:
Пример 2 : В этом примере описываются события панели Angular PrimeNG.
- app.component.html
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
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 { 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:
Javascript
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" )} } |
Выход:
Ссылка: http://primefaces.org/primeng/panel