AngularJs 2 Series: Build Your Own Directive

Rajeev HathiDecember 20th, 2016Last Updated: December 18th, 2016

1 44 3 minutes read

Introduction

Directives are simply instructions given in the form of HTML element, attribute or id. The selector meta data in the component is a directive. The selector is a HTML element or tag which can be placed in the HTML file to render your component. It also means we have a placed a directive to instruct HTML to render a component. Apart from being associated as HTML tags with components, directives also comes in two other forms: Attribute and Structural. Attributes are properties to HTML element or tag.

For example: <input type="text" ngClass="body-color" /> where type is native HTML attribute and ngClass is in-built Angular attribute. Structural directives are used when you want to change the structure of the HTML or DOM. For example: *ngIf and *ngFor are built-in Angular structural directives where *ngIf conditionally alters the structure of DOM while *ngFor modifies the DOM by adding elements using an iteration.

In this article I will demonstrate the use of AngularJs 2 Directive feature. I will show you how to develop a custom attribute or property to an HTML element or tag which can then be associated to a component selector to render the desired output. We will use Angular CLI (Command Line Interface) to build the AngularJs 2 Directive. The article assumes that you have already setup AngularJs with CLI.

For more information on setting up Angular CLI you can refer to Build Your Own Component article.

Creating Highlight Attribute Directive

We will create a highlight attribute directive that will highlight the text background to yellow color. We will associate this attribute with the component that displays text. Open the Node.js command prompt, navigate to <your-project-home>\src\app folder and run the following command:

ng generate directive highlight

The above command will create two files viz. hightlight.directive.spec.ts and hightlight.directive.ts. You can safely ignore the .spec.ts file as this is for testing purpose. Let’s look at the hightlight.directive.ts file:

import {Directive} from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

	constructor() {}
}

The is our highlight directive class automatically named as HighlightDirective. Lets understand the structure of the class. As you can see, the @Directive decorator is used to indicate that this class is a directive and it has a single selector meta-data. By default, the selector name generated is [appHighlight] but we will change this to [highlight]. It means we have created a highlight attribute directive and therefore it can be associated to a component displaying text that needs to be highlighted with yellow color.

We will create a text component named TextComponent. For more information on creating component refer to the Build Your Own Component article.
So lets assume you have created TextComponent component class with the selector as <app-text> and the template file text.component.html. Open the template file and add our newly created highlight attribute directive to the HTML snippet as shown below:

<p highlight>
  text works!
</p>

As you can see above, we have placed highlight attribute to the HTML p tag that will highlight the text.

You have to put the selector <app-text> to render or display the text component. You will ideally put it in the bootstrap (starting) component of your application.

Upon running the Angular application, you will not see the highlight yellow background color yet. This is because we still have to provide the logic for styling the background color to yellow. Let’s go back to our HighlightDirective directive class and implement the highlight logic.

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {

	constructor(private elementRef: ElementRef, private renderer: Renderer) {
		this.renderer.setElementStyle(this.elementRef.nativeElement, 'background-color', 'yellow');
	}

}

As you can see from the above code, we make use of Renderer service to render an element with the background style color as yellow. The element reference can be obtained using the instance of ElementRef type. This is the element reference where you put your highlight attribute. Now upon running the application, you should see the text with highlighted color as yellow.

Reference:

AngularJs 2 Series: Build Your Own Directive from our WCG partner Rajeev Hathi at the TECH ORGAN blog.