Skip to main content

angular bootstrap - How to use Collapse

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  isCollapsed:boolean = false;
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to use Collapse
</h4>

<p>
  <button 
    type="button" 
    class="btn btn-outline-primary" 
    (click)="collapse.toggle()" 
    [attr.aria-expanded]="!isCollapsed"
    aria-controls="collapseExample">
      Toggle Collapse
  </button>
</p>

<div #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed">
  <div class="card">
    <div class="card-body">
      We can collapse this card by clicking the Toggle button.
    </div>
  </div>
</div>
More Angular tutorials
Labels: