Angular 2 toggle button | Angular 2 collapsible panel

Let us check how we can build a toggle button using angular js 2. Same code you can use for building collapsible panel as well. It is almost similar like angular js 1 concept except some syntax changes. So if you are an angular js 1 guy, you are the best person to learn angular js2 as well :) :).

Here I have used ngif(ng-if in angular js 2) and angular 2 click method(ng-click in angular js 2) to achieve this.

Component code

@Component({
    selector: 'my-app',
    template: `<h2>{{title}}</h2>
        <button (click)="showSelected()">
            <span *ngIf="!selected">Show</span>
            <span *ngIf="selected">Hide</span>
        </button>
        <div>
            <ul *ngIf="selected">
                <li *ngFor="let i of items">
                    <p>{{i.name}} ({{i.exp}})</p>
                </li>
            </ul>
        </div>
        `
})

export class App {
    title: string;
    items: any[];
    selected: boolean;
    constructor() {
        this.title = "Angular 2 Toggle";
        this.selected = true;
        this.items = [{
            name: 'Prashobh',
            exp: '9',
        },
        {
            name: 'Abraham',
            exp: '15',
        },
        {
            name: 'George',
            exp: '2',
        },
        {
            name: 'John',
            exp: '20',
        }
        ]
    }
    showSelected(item) {
        this.selected = !this.selected;
    }
}

Related Post

1. ng-repeat in angular js 2

2. Angular 2 filter using pipe concept

3. ng-click in angular js 2