[Angular 2] Building a Toggle Button Component

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;
}