События панели Angular PrimeNG

Опубликовано: 23 Февраля, 2023

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

Technical Scripter Picked AngularJS

События панели Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ