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:

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.

Join the conversation...

Posted by nodecotics
October 11, 2017

it's funny because i was just looking at React components and the similarities between these architectures makes me question React's dominance over the Angular framework.

both seem to have adapted a unidirectional data flow which makes the decision to use one over the other a matter of personal preference. i believe stackchief also has an article on angular components, but they are basically the same as directives like the article says!
Posted by JavascriptUsa
October 1, 2017

This article did a good job of highlighting the differences between components and directives. It's funny how things got so complicated with the release of angular 2 in terms of what is considered what. It's important to remember at the end of the day that everything is a component. It's very similar to creating any UI component in react really ....
Posted by apachenutz
August 18, 2017

great read.