Аккордеонные события Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы познакомимся с компонентом Events of Accordion в Angular PrimeNG.
Компонент Accordion используется для отображения раздела пользовательского контента во вкладках.
Аккордеонные события:
- onOpen: это функция обратного вызова, вызываемая при открытии вкладки.
- onClose: функция обратного вызова вызывается, когда активная вкладка закрывается нажатием на ее заголовок.
Создание приложения 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 onOpen Accordion .
- app.component.html
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
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 { 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
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) { } open() { this.messageService.add({ severity: "success", summary: "Tab Opened" }); }} |
Выход:
Пример 2: В этом примере описывается событие Angular PrimeNG onClose Accordion.
- app.component.html
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
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 { 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
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) { } close() { this.messageService.add({ severity: "warn", summary: "Tab Closed" }); }} |
Выход:
Ссылка: https://primefaces.org/primeng/accordion