Thursday, 7 June 2018

Angular - Attribute - Bind to a second property

Add a second input property to HighlightDirective called defaultColor:
src/app/highlight.directive.ts (defaultColor)
@Input() defaultColor: string;
Revise the directive's onMouseEnter so that it first tries to highlight with the highlightColor, then with the defaultColor, and falls back to "red" if both properties are undefined.
src/app/highlight.directive.ts (mouse-enter)
@HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
As with components, you can add as many directive property bindings as you need by stringing them along in the template. The developer should be able to write the following template HTML to both bind to the AppComponent.color and fall back to "violet" as the default color.
src/app/app.component.html (defaultColor)
<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
Angular knows that the defaultColor binding belongs to the HighlightDirective because you made it public with the @Input decorator.
Here's how the harness should work when you're done coding.

No comments:

Post a Comment