Angular 4 Directives

Angular directives are similar to components. This tutorial explains the key differences between Angular 4 directives and components and gives a quick example on writing a directive in Angular 4.

Angular 4 Directive vs Component

According to Angular's documentation, a component is really just another form of a directive. There are three types of directives:

Components

Components are simply directives with their own templates.

Structural Directives

Structural directives change the DOM layout by adding and removing elements.

Attribute directives

These directives change the appearance or behavior of a specified element or component.

Since components are technically directives, the "components vs directives" argument gets confusing fast. As best practice, use components when you want to create new DOM elements with their own HTML template. Use attribute directives when you want to change or alter existing DOM elements. You can also check our tutorial on Angular components for more information.

Angular 4 Directive Example

Let's demonstrate how to create a simple attribute directive. Assuming you have the Angular CLI installed, create a new Angular project by running:

ng new angularDirectives

This will create a new Angular project called angularDirectives with all the necessary configurations for running your app locally.

To generate your first directive using the CLI, run:

ng g directive bigText

This will generate a few files and run some configuration for the new bigText directive, including:

• Create the main big-text.directive.ts file under the src/app/ directory
• Create the big-text.directive.spec.ts file for unit testing under the src/app directory
• Add the necessary imports and declarations in the root module, app.module.ts

Writing an Angular 4 custom directive

Now that you have the necessary files in place, it's time to make your new BigTextDirective do things. Navigate to the big-text.directive.ts file and replace its contents with the following:

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

@Directive({ selector: '[appBigText]' })
export class BigTextDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.fontSize = '100px'
    }
}

This directive will find any DOM elements with the appBigText attribute and change the font size to 100px. To easily reference the element within the constructor() function, you import both the ElementRef and Directive modules from the @angular/core library.

Notice how the attribute is specified in the @Directive decorator via the selector property.

Also notice how the element's font size is increased within the constructor function via el.nativeElement.style.fontSize = "100px".

Linking the directive to the DOM

As a final step, you need to link your newly created directive to the DOM. Since you have a default component and HTML template for app.component.html already generated, you can simply append a new element to the view with the appBigText attribute.

<div appBigText>This text is huge.</div>.

Notice how we reference the directive via the appBigText attribute on the div tag.

If you aren't running the local dev server, run ng serve and visit localhost:4200 in your browser. If everything worked, you should see "This text is huge" in 100px font.

Conclusion

This was an example of an attribute directive. Remember that components are really just directives with their own templates. Use attribute directives when you want to change existing DOM element behavior.

Your thoughts?