Программное управление Angular PrimeNG Accordion

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

Angular PrimeNG — это библиотека компонентов пользовательского интерфейса, созданная PrimeTek для помощи разработчикам Angular в упрощении процесса разработки согласованных и масштабируемых веб-интерфейсов за меньшее время. В этой статье мы поговорим о программном управлении Accordion в Angular PrimeNG.

Компонент Accordion используется для отображения содержимого в наборе вкладок. Вкладки аккордеона можно открывать и закрывать, щелкая заголовок вкладок аккордеона, но этим также можно управлять программно, изменяя массив activeIndex компонента аккордеона.

Свойства программного управления Angular PrimeNG Accordion:

множественный: когда это свойство имеет значение true, несколько вкладок аккордеона могут быть открыты одновременно.
activeIndex: это индекс активной вкладки или массив индексов для программного изменения выбранной вкладки.

Программное управление Angular PrimeNG Accordion AccordionTab Свойства:

disabled: для этого свойства можно установить значение true, чтобы отключить конкретную вкладку аккордеона.

Синтаксис:

// File Name: app.component.html

<button 
    pButton 
    type="button" 
    label="..." 
    (click)="toggleTab(index)">
</button>

<p-accordion [multiple]="true">
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[0]">
        ...
    </p-accordionTab>
    <p-accordionTab 
        header="..." 
        [(selected)]="activeTabs[1]">
        ...
    </p-accordionTab>
</p-accordion>

// File Name: app.component.ts

toggleTab(idx: number)
{
    this.activeTabs[idx] = !this.activeTabs[idx];
}

Создание приложения и установка необходимых модулей:

Шаг 1: Создайте приложение Angular с помощью следующей команды.

ng new my_app

Шаг 2: После создания приложения перейдите в папку проекта с помощью команды, написанной ниже.

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

npm install primeng --save
npm install primeicons --save

Структура проекта: Теперь структура проекта будет такой, как показано на рисунке ниже.

Пример 1. В этом примере мы использовали кнопки для программного переключения вкладок аккордеона.

приложение.component.html:

HTML

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion 
        Programmatic Control
    </h4>
  
    <div class="mb-4">
        <button 
            pButton 
            type="button" 
            class="mr-3" 
            label="Toggle Tab 1" 
            (click)="toggleTab(0)">
        </button>
  
        <button 
            pButton 
            type="button" 
            label="Toggle Tab 2" 
            (click)="toggleTab(1)">
        </button>
    </div>
  
    <p-accordion [multiple]="true">
        <p-accordionTab 
            header="AccordionTab 1 Header" 
            [(selected)]="activeTabs[0]">
            This is the content of the Accordion Tab 1.
        </p-accordionTab>
        <p-accordionTab 
            header="AccordionTab 2 Header" 
            [(selected)]="activeTabs[1]">
            This is the content of the Accordion Tab 2.
        </p-accordionTab>
    </p-accordion>
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    activeTabs: boolean[] = [false, false];
  
    toggleTab(idx: number)
    {
        this.activeTabs[idx] = 
            !this.activeTabs[idx];
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2. Вкладки аккордеона с отключенным свойством, для которого установлено значение true, также можно переключать программно, даже если они отключены.

приложение.component.html:

HTML

<div style="width: 400px;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Accordion 
        Programmatic Control
    </h4>
  
    <div class="mb-4">
        <button 
            pButton 
            type="button" 
            label="Toggle The Disabled Tab" 
            (click)="toggleTab(1)">
        </button>
    </div>
  
    <p-accordion [multiple]="true">
        <p-accordionTab 
            header="Active Accordion Tab" 
            [(selected)]="activeTabs[0]">
            This is the content of the Active Accordion Tab.
        </p-accordionTab>
        <p-accordionTab 
            header="Disabled Accordion Tab"
            [disabled]="true" 
            [(selected)]="activeTabs[1]">
            This is the content of the Disabled Tab.
        </p-accordionTab>
    </p-accordion>
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    activeTabs: boolean[] = [false, false];
  
    toggleTab(idx: number) {
        this.activeTabs[idx] = 
            !this.activeTabs[idx];
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { AccordionModule } from "primeng/accordion";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        ButtonModule,
        AccordionModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: https://www.primefaces.org/primeng/accordion

Technical Scripter Picked AngularJS

Программное управление Angular PrimeNG Accordion

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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