Angular 2 Collapse

Angular 2 collapse is a useful component when we want to hide or show content on demand. (User click)

angular 2 collapse
angular 2 collapse

When we click on a button we change the current state of our isCollapsed variable. We use the power of bootstrap.

live example at the end of the article

try angular 2 collapse
try angular 2 collapse

Include bootstrap before we start (it’s easy : ) )

<link href=”” rel=”stylesheet”>


Let’s build an Angular 2 collapse example.

Angular 2 collapse example
Angular 2 collapse example


main app code source :


 * Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';
import {Collapse} from './collapse.component';

/*Angular 2 Collapse Example*/
    selector: 'my-app',
                <h3>Angular 2 Collapse HTML Content</h3>
                <button type="button" class="btn btn-primary"
                        (click)="isCollapsedContent = !isCollapsedContent">Show / Hide Content (Toggle collapse)
                <div [collapse]="isCollapsedContent" class="card card-block card-header">
                  <div class="well well-lg">
                   HTML content goes here !
                   <b>bold text</b> <br>
                   <span>this is a collapse example</span>

                 <h3>Angular 2 Collapse HTML Content (IMAGE)</h3>
                 <button type="button" class="btn btn-primary"
                        (click)="isCollapsedImage = !isCollapsedImage">Show / Hide Image (Toggle collapse)
                <div [collapse]="isCollapsedImage" class="card card-block card-header">
                        <img src="" alt="BMW 1">

    directives: [Collapse],
export class Angular2Collapse  {
    //collapse content
    public isCollapsedContent:boolean = false;
    //collapse image (example)
    public isCollapsedImage:boolean = true;



Our example uses Typescript as programming language.


Download all files from here:angular-2-collapse