Angular ng Bootstrap Componente de acordeón

Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.

En este artículo sabremos cómo usar Accordion en angular ng bootstrap. Accordion se utiliza para mostrar contenido plegable que presenta información en una cantidad limitada de espacio.

Sintaxis de instalación:

ng add @ng-bootstrap/ng-bootstrap

Acercarse:

• Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
• Importe el módulo de arranque ng en module.ts

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  imports: [
    NgbModule
  ]
  

• En app.component.html crea un componente de acordeón.
• Sirve la aplicación usando ng serve.

 

Ejemplo:

pp.componente.html

<ngb-accordion #acc="ngbAccordion"                activeIds="ngb-panel-0">   <ngb-panel title="GeeksforGeeks">     <ng-template ngbPanelContent>       Content1     </ng-template>   </ngb-panel>   <ngb-panel>     <ng-template ngbPanelTitle>       <span>Angular 10</span>     </ng-template>     <ng-template ngbPanelContent>       Content2     </ng-template>   </ngb-panel>   <ngb-panel title="Ng bootstrap"              [disabled]="true">     <ng-template ngbPanelContent>       Content3     </ng-template>   </ngb-panel>4 </ngb-accordion>

aplicación.módulo.ts

import { NgModule } from '@angular/core';    // Importing forms module import { FormsModule, ReactiveFormsModule  } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';     import { AppComponent }   from './app.component'; import { NgbModule }  from '@ng-bootstrap/ng-bootstrap';     @NgModule({   bootstrap: [     AppComponent   ],   declarations: [     AppComponent   ],   imports: [     FormsModule,     BrowserModule,     BrowserAnimationsModule,     ReactiveFormsModule,     NgbModule   ] }) export class AppModule { }

Producción:



Referencia: https://ng-bootstrap.github.io/#/components/accordion/examples