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=”https://maxcdn.bootstrapcdn.com/bootstrap/x.x.x/css/bootstrap.min.css” 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 angulartypescript.com
 */
import {Component} from 'angular2/core';
import {Collapse} from './collapse.component';

/*Angular 2 Collapse Example*/
@Component({
    selector: 'my-app',
    template:`
                <h3>Angular 2 Collapse HTML Content</h3>
                <button type="button" class="btn btn-primary"
                        (click)="isCollapsedContent = !isCollapsedContent">Show / Hide Content (Toggle collapse)
                </button>
                <hr>
                <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>
                  </div>
                </div>

                 <h3>Angular 2 Collapse HTML Content (IMAGE)</h3>
                 <button type="button" class="btn btn-primary"
                        (click)="isCollapsedImage = !isCollapsedImage">Show / Hide Image (Toggle collapse)
                </button>
                <hr>
                <div [collapse]="isCollapsedImage" class="card card-block card-header">
                        <img src="http://www.angulartypescript.com/wp-content/uploads/2016/03/car3.jpg" alt="BMW 1">
                </div>

             `,
    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.

angular-2-ui-framework

Download all files from here:angular-2-collapse