This lesson shows you how to build a Toggle Button in Angular 2 from scratch. It covers using transclusion in Angular 2, setting up your own two-way binding, and making the button into a reusable component.
toggle-button.ts:
import {Component, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'toggle-button', styles: [ ` .on{ background-color: white; color: black; } .off{ background-color: black; color: white; } ` ], template: ` <button (click)="onClick($event)" [ngClass]="on ? 'on' : 'off'"> <ng-content></ng-content> </button> ` }) export class ToggleButton{ @Input() on; @Output() onChange = new EventEmitter(); onClick($event){ this.on = !this.on; this.onChange.emit(this.on); } }
app.ts:
import {Component} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import {ToggleButton} from './components/toggle-button/toggle-button'; export interface AppState{ todos: Todo[]; } @Component({ moduleId: module.id, selector: 'seed-app', providers: [], pipes: [], directives: [ToggleButton], template: ` <toggle-button [(on)]="state"> {{state ? 'On' : 'Off'}} </toggle-button> `, }) export class SeedApp { state = false; }