Angular ng Bootstrap Collapse Component
Last Updated :
06 Jul, 2021
Angular ng bootstrap is a bootstrap framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites.
In this article we will know how to use Collapse in angular ng bootstrap. Collapse is used to make a button that will be collapsed by clicking on it.
Installation syntax:
ng add @ng-bootstrap/ng-bootstrap
Approach:
Example 1: In this example, we are making a basic collapse component.
app.component.html
< p >
< br />
< button type = "button"
class = "btn btn-success"
(click)="collapse.toggle()"
[attr.aria-expanded]="!gfg"
aria-controls = "collapseExample" >
Click to collapse
</ button >
</ p >
< div # collapse = "ngbCollapse"
[(ngbCollapse)]="gfg">
< div class = "card" >
< div class = "card-body" >
Angular10 ng bootstrap
</ div >
</ div >
</ div >
|
app.module.ts
import { NgModule } from '@angular/core' ;
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 { }
|
app.component.ts
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public gfg = false ;
}
|
Output:
Example 2: In this example, we have pre collapsed the component.
app.component.html
< p >
< br />
< button type = "button"
class = "btn btn-success"
(click)="collapse.toggle()"
[attr.aria-expanded]="!gfg"
aria-controls = "collapseExample" >
Click to collapse
</ button >
</ p >
< div # collapse = "ngbCollapse"
[(ngbCollapse)]="gfg">
< div class = "card" >
< div class = "card-body" >
Angular10 ng bootstrap
</ div >
</ div >
</ div >
|
app.module.ts
import { NgModule } from '@angular/core' ;
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 { }
|
app.component.ts
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public gfg = true ;
}
|
Output:
Reference: https://ng-bootstrap.github.io/#/components/collapse/examples
Share your thoughts in the comments
Please Login to comment...