Dynamic attribute directives

What if we, the authors of this directive, are the final consumers? What if another developer is reusing the directive as an API? How do we make it flexible enough with dynamic values? When you ask yourself these questions while writing directives, then it's time to make it dynamic.

All this while, we have been using the directive without any value. We can actually use attribute values to receive inputs into the directive:

<button appUiButton bgColor="red">Click!!</button>

We added a new attribute, bgColor, which is not a directive but an input property. The property is used to send dynamic values to the directive, as follows:

import {   Directive,   ElementRef,   HostListener,   Input, OnInit } from '@angular/core'; ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.