Angular MDBootstrap Collapse Component
MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Collapse Component in Angular MDBootstrap.
The Collapse Component indicates a collapsible element i.e. the content that will be shown or hidden with a click of a button.
Syntax:
<button mdbBtn (click)="gfg.toggle()" mdbWavesEffect> Click here </button> <div mdbCollapse #gfg="bs-collapse"> <p>Content</p> </div>
Approach:
- Download Angular MDBootstrap from the official site.
- Extract the files and change them to the working directory.
- Install npm in the current project using the following command:
npm install
- After creating your project folder i.e. appname, move to it using the following command:
cd appname
- Start the server using the following command:
ng serve
Project Structure: After complete installation, it will look like the following:
Example 1: This is the basic example that illustrates how to use the Collapse Component in Angular MDBootstrap.
app.component.html
< div id = 'gfg' > < h1 >w3wiki</ h1 > < h4 >Angular MDBootstrap Collapse Component</ h4 > < br /> < div > < button mdbBtn color = "primary" class = "waves-light" type = "button" (click)="gfg.toggle()" mdbWavesEffect> Click Here To Toggle! </ button > < div mdbCollapse # gfg = "bs-collapse" > < p > MDBootstrap is a bootstrap-based angular UI library that is used to make good looking< br /> webpages with its seamless and easy-to-use component. </ p > </ div > </ div > </ div > |
app.component.ts
import { Component } from '@angular/core' ; @Component({ selector: 'my-app' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent{} |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
Output:
Example 2: In this example, we have collapsed the text in the ngAfterViewInit lifecycle in Angular MDBootstrap.
app.component.html
< div id = "gfg" > < h1 >w3wiki</ h1 > < h4 > Angular MDBootstrap Collapse Component </ h4 > < br /> < button mdbBtn color = "success" type = "button" (click)="test.toggle(); togglebg()" mdbWavesEffect> Click Here To Toggle </ button > < div mdbCollapse [isCollapsed]="true" # test = "bs-collapse" > < p * ngIf = "togglevisible" > MDBootstrap is a bootstrap-based angular UI library that is used to make good looking< br /> webpages with its seamless and easy-to-use component. </ p > </ div > </ div > |
app.component.ts
import { AfterViewInit, Component, ViewChildren } from "@angular/core" ; @Component({ selector: "my-app" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent implements AfterViewInit { @ViewChildren(AppComponent) collapses!: AppComponent[]; ngAfterViewInit(): void {} togglevisible = false ; togglebg() { this .togglevisible = ! this .togglevisible; } } |
app.module.ts
import { BrowserModule } from "@angular/platform-browser" ; import { NgModule } from "@angular/core" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { CollapseModule, MDBBootstrapModule } from "angular-bootstrap-md" ; import { FormsModule } from "@angular/forms" ; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModule.forRoot(), FormsModule, CollapseModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} |
app.component.css
#gfg{ margin : 40px } .a{ border-radius: 5px ; border : 2px solid black ; padding : 10px ; } |
Output:
Reference: https://mdbootstrap.com/docs/angular/advanced/collapse/