[Angular 2] Building a Toggle Button Component
Angular Component button Building Toggle
2023-09-14 09:00:53 时间
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; }
相关文章
- 模块化开发 Angular 应用 [含懒加载]
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- 关于 SAP Spartacus Angular HTTP Interceptor 的拦截顺序
- 关于 Angular HttpClient 的单例特性的思考
- Angular 面试题汇总2-Component/Service (Angular v8+)
- angular基础面试题_java web面试题
- uat环境和生产环境的区别_angular 生产环境 相对路径无效
- Angular 应用 tsconfig.json 文件里的 typeRoots 属性讲解
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- 关于 Angular 编程中的 shim 概念
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- 什么是 Angular library 的 secondary entry points?
- Angular 服务器端渲染场景里,服务器端和客户端渲染出的 HTML 源代码有可能不完全一致
- angular.foreach循环方法使用指南