Angular ng Bootstrap 手风琴组件

Angular ng bootstrap 是一个与 Angular 一起使用的引导框架，用于创建具有出色样式的组件，该框架非常易于使用，用于制作响应式网站。

在本文中，我们将了解如何在 angular ng bootstrap 中使用 Accordion。 Accordion用于显示可折叠的内容，这些内容在有限的空间中呈现信息。

安装语法：

ng add @ng-bootstrap/ng-bootstrap

方法：

• 首先，使用上述命令安装 angular ng bootstrap。
• 在 module.ts 中导入 ng 引导模块

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

  • 在 app.component.html 中制作一个手风琴组件。
  • 使用 ng serve 为应用程序提供服务。

  例子：

  pp.component.html

  
    
      
        Content1
      
    
    
      
        Angular 10
      
      
        Content2
      
    
    
      
        Content3
      
    4
  

  
  
  

  app.module.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 { }
  

  输出：

  

  参考： https://ng-bootstrap.github.io/#/components/accordion/examples