Thursday, 7 June 2018

Angular - Attribute - Build a simple attribute directive

An attribute directive minimally requires building a controller class annotated with @Directive, which specifies the selector that identifies the attribute. The controller class implements the desired directive behavior.
This page demonstrates building a simple appHighlight attribute directive to set an element's background color when the user hovers over that element. You can apply it like this:
src/app/app.component.html (applied)
<p appHighlight>Highlight me!</p>


Write the directive code:
Create the directive class file in a terminal window with this CLI command.
ng generate directive highlight
The CLI creates src/app/highlight.directive.ts, a corresponding test file (.../spec.ts, and declares the directive class in the root AppModule.
Directives must be declared in Angular Modules in the same manner as components.
The generated src/app/highlight.directive.ts is as follows:
src/app/highlight.directive.ts
import { Directive } from '@angular/core';

  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}
The imported Directive symbol provides the Angular the @Directive decorator.
The @Directive decorator's one configuration property specifies the directive's CSS attribute selector[appHighlight].
It's the brackets ([]) that make it an attribute selector. Angular locates each element in the template that has an attribute named appHighlight and applies the logic of this directive to that element.
The attribute selector pattern explains the name of this kind of directive.

Why not "highlight"?
Though highlight would be a more concise selector than appHighlight and it would work, the best practice is to prefix selector names to ensure they don't conflict with standard HTML attributes. This also reduces the risk of colliding with third-party directive names. The CLI added the app prefix for you.
Make sure you do not prefix the highlight directive name with ng because that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.
After the @Directive metadata comes the directive's controller class, called HighlightDirective, which contains the (currently empty) logic for the directive. Exporting HighlightDirective makes the directive accessible.
Now edit the generated src/app/highlight.directive.ts to look as follows:
src/app/highlight.directive.ts
import { Directive, ElementRef } from '@angular/core';

  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}
The import statement specifies an additional ElementRef symbol from the Angular core library:
You use the ElementRef in the directive's constructor to inject a reference to the host DOM element, the element to which you applied appHighlight.
ElementRef grants direct access to the host DOM element through its nativeElement property.
This first implementation sets the background color of the host element to yellow.

Apply the attribute directive:
To use the new HighlightDirective, add a paragraph (<p>) element to the template of the root AppComponent and apply the directive as an attribute.
src/app/app.component.html
<p appHighlight>Highlight me!</p>
Now run the application to see the HighlightDirective in action.
ng serve
To summarize, Angular found the appHighlight attribute on the host <p> element. It created an instance of the HighlightDirective class and injected a reference to the <p> element into the directive's constructor which sets the <p> element's background style to yellow.




No comments:

Post a Comment