angular 2 toggle button example

Angular 2 toggle button | Angular 2 toggle button

Hello everyone, I am going  to share the code sample for angular 2 toggle button.

<button (click)="toggle()">Toggle Button</button>

//The Example for Angular2 Toggle as given below!
//Import root component.
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

  selector: 'toggle-app',
  bindings: []

//View template.
  template: `
           <button (click)="toggle()">Toggle Button</button>
      <div class="border">
        <div *ng-if="isActive">
                 <h1>Hello Angular 2, Toggle Button.</h1>
     <p>Status(isActive): {{isActive}}</p>
  directives: [CORE_DIRECTIVES]

//Toggle class App for active and hide div.
export class App {
     isActive: bool = true;

     toggle() {
        this.isActive = !this.isActive;

Example - live demo as given below.


Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions