If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the control that does the toggling. Instead of making the parent component handle that, we can provide a toggler directive that automatically applies the needed attributes. Content directives allow the user to tell the UI component where to make those modifications.

<switch toggler [on]="on" (click)="fns.toggle()">
</switch>

We added a toggler directive to share all the common attrs:

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
selector: '[toggler]'
})
export class TogglerDirective {
@HostBinding('attr.role') role = 'switch'; @HostBinding('attr.aria-checked') @Input() on; constructor() { } }

[Angular] Modify User Provided UI with Angular Content Directives的更多相关文章

  1. 集成 Kendo UI for Angular 2 控件

    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...

  2. Kendo UI for Angular 2 控件

    Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免 ...

  3. [Web UI]对比Angular/jQueryUI/Extjs:没有一个框架是万能的

    Angular不能做什么?对比Angular/jQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你们两个字 ...

  4. Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

    如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...

  5. [Angular 2 Router] Configure Your First Angular 2 Route

    Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...

  6. 【Angular专题】——(1)Angular,孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  7. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  8. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

  9. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

随机推荐

  1. k8s 核心功能[转]

    部署应用 执行命令: kubectl run kubernetes-bootcamp \ --image=docker.io/jocatalin/kubernetes-bootcamp:v1 \ -- ...

  2. python json.loads json.dumps的区别

    json.loads() 是将字符串传化为字典 json.dumps () 是将字典转化为字符串 >>> dict = "{8:'bye', 'you':'coder'}& ...

  3. zabbix auto registration

    1./etc/zabbix/zabbix_agent.conf serverActive=zabbix server ip 2.frontend configuration>actions> ...

  4. jvm 内存溢出 在myeclipse中加大tomcat的jvm内存 java.lang.OutOfMemoryError: PermGen space

    使用myeclipse启动两个SSH2的部署在tomcat6下的项目 报出java.lang.OutOfMemoryError: PermGen space 解决办法: 在myeclipse中加大jv ...

  5. Navicat Premium 12试用期的破解方法

    参考:https://blog.csdn.net/Jason_Julie/article/details/82864187 已测可用

  6. Git Bash Windows客户端乱码

    最近升级Git后,打开Git Bash出现了乱码,解决方法是: 注意,我升级之后,本地和字符集栏位出现了空白的情况.如果检查这里为空白,那么把本地设置为zn_CN,字符集设置为UTF-8

  7. 洛谷P2802 回家

    贱呼呼的搜索题 这个最贱的还是在于路途的标记,大部分的题目路途的标记是直接标记即可也就是说我走过了这个点,那么这个点标记上以后不再走,这个题不是,我走过了,但是我可能回了血我又继续走 所以说我们标记的 ...

  8. [模板] Miller-Rabin 素数测试

    细节挺多的.. #include<iostream> #include<cstdlib> #include<cstdio> #include<ctime> ...

  9. 测试linux服务器带宽

    测试准备 1. 计划考量参数 TCP上传数据带宽 TCP下载数据带宽 UDP上传带宽 UDP下载带宽 多并发支持 稳定性 Tcp通讯网络延迟(小包:32.中包1k.大包1M) UDP通讯网络延迟(小包 ...

  10. 使用Docker compose编排Laravel应用

    前言 Laravel官方开发环境推荐的是Homestead(其实就是一个封装好的Vagrant box),我感觉这个比较重,于是自己用Docker compose编排了一套开发环境,在这里分享下. 环 ...