[Angular] Modify User Provided UI with Angular Content Directives
2023-09-14 09:00:49 时间
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] Provide Feedback to Progress Events with Angular’s HttpRequest Object
- [Angular Unit Testing] Debug unit testing -- component rendering
- [AngularJS] Isolate State Mutations in Angular Components
- [Angular 2] Refactoring mutations to enforce immutable data in Angular 2
- [Angular-Scaled web] 5. ui-router $stateParams for sharing information
- [Angular 8 Unit testing] Testing a smart component with service injection -- 1
- [Angular] Auxiliary named router outlets
- [Immutable + AngularJS] Use Immutable .List() for Angular array
- [Unit Testing] Angular Unit Testing, ui-router, httpbackend and spy
- [AngularJS] angular-formly: Default Options
- [AngularJS] Consistency between ui-router states and Angular directives
- SAP Spartacus Angular Component和CMS Component的映射关系
- Angular 开发里的 polyfills.js、runtime.js、styles.js 和 vendor.js 是用来做什么的
- Angular应用页面里_ngcontent属性的生成逻辑
- 如何通过调试的方式搞清楚Angular createEmbeddedView具体创建的UI元素是什么
- 关于 Angular 应用 Components 和 Directives 的实例化问题
- 如何使用Angular Generator创建新的Component