zoukankan      html  css  js  c++  java
  • [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;
    }
  • 相关阅读:
    32 最小子串覆盖
    31 数组划分
    29 交叉字符串
    动态规划
    18 带重复元素的子集
    17 子集
    16 带重复元素的排列
    23.二叉树的后续遍历序列
    J.U.C-其他组件
    21.Longest Palindromic Substring(最长回文子串)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5681176.html
Copyright © 2011-2022 走看看