Angular 4 Directives

Angular directives provide a flexible way to add behavior to elements in your applications. This guide will update you on the differences between directives and components, and walk you through creating a directive using the latest Angular approaches.

Key Takeaways

• Directives and components are both integral to Angular; components are directives with templates.
• There are three types of directives: structural, attribute, and components.
• Attribute directives modify the existing elements' behavior or appearance.
• Learn how to create a custom directive to add specific behavior to your app.

Directive vs Component

In Angular, the term directive encompasses components as well. A component is essentially a directive with a template. Understanding this relationship is crucial as it guides when to use each one. There are three main types of directives:

Components

Components are the most common type of directive. They encapsulate logic, style, and template within a single class.

Structural Directives

These are used to change the DOM layout. Examples include *ngIf and *ngFor.

Attribute Directives

Attribute directives modify an element’s appearance or behavior, without changing its structure.

Use components when you want an independent piece of the UI with its own template. Use attribute directives for functionalities like styling or manipulating DOM behavior.

Angular Directive Example

Let’s dive into creating an attribute directive. With the Angular CLI installed, start by creating a new project:

ng new angularDirectives

This will set up a project with all necessary configurations. Next, to create your first directive, use:

ng generate directive bigText

This command generates necessary files for the bigText directive:

• The main big-text.directive.ts file
• A test file big-text.directive.spec.ts
• Updates to app.module.ts for imports and declarations

Writing a Custom Directive

Open the big-text.directive.ts file and modify it as follows:

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

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

This directive applies to any element with the appBigText attribute, setting its font size to 100px. The decorator @Directive defines its selector, and the ElementRef enables direct manipulation of the DOM element.

Integrating the Directive

Link the directive to the DOM. Insert an element with the appBigText attribute into the app.component.html file:

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

To see it in action, ensure your app is served locally by running ng serve and then open localhost:4200 in your browser. You should see the text displayed in a large font size.

FAQ

Can components and directives be interchangeable?

While components are technically directives with templates, they serve different purposes. Use components for UI pieces with their own behavior and template and directives to apply simple functionality and styling to existing elements.

Are attribute directives still relevant in recent Angular versions?

Yes, attribute directives continue to play an important role for adding behavior or modifying styles of existing elements without altering the structure.

How has Angular CLI evolved since Angular 4?

The Angular CLI has significantly improved, adding new schematics and flags to streamline development processes like generating components, services, and directives efficiently.