The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Custom Directives

Next ►
►

In this section, we will explore how to create custom directives in Angular. Directives are a powerful feature in Angular that allow you to extend the HTML by creating custom behavior. Custom directives can be used to manipulate the DOM, apply styles, or add new functionality to your components.

Key Concepts

  1. What are Directives?

    • Directives are classes that add additional behavior to elements in your Angular applications.
    • There are three types of directives in Angular:
      • Component Directives: Directives with a template.
      • Structural Directives: Directives that change the DOM layout by adding and removing DOM elements.
      • Attribute Directives: Directives that change the appearance or behavior of an element, component, or another directive.

  2. Creating a Custom Directive

    • Custom directives are created using the @Directive decorator.
    • The @Directive decorator requires a selector, which is used to apply the directive to an element.

  3. Using the Directive

    • Once created, the directive can be used in templates by adding the directive's selector to an element.

Step-by-Step Guide to Creating a Custom Directive

Step 1: Generate a New Directive

You can generate a new directive using the Angular CLI:

ng generate directive highlight

This command will create two files: highlight.directive.ts and highlight.directive.spec.ts.

Step 2: Define the Directive

Open the highlight.directive.ts file and define the directive:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

Explanation

  • ElementRef: A service that grants direct access to the DOM element.
  • Renderer2: A service that allows you to manipulate the DOM in a safe way.
  • @HostListener: A decorator that listens to DOM events and triggers the associated method.

Step 3: Use the Directive in a Component

To use the directive, add it to the declarations array in your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, apply the directive in a component template:

<p appHighlight>Hover over this text to see the highlight effect.</p>

Practical Exercise

Exercise 1: Create a Custom Directive

Objective: Create a custom directive that changes the text color of an element when clicked.

  1. Generate a new directive named textColor.
  2. Define the directive to change the text color to blue when the element is clicked.
  3. Use the directive in a component template.

Solution

  1. Generate the directive:
ng generate directive textColor
  1. Define the directive:
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appTextColor]'
})
export class TextColorDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click') onClick() {
    this.changeColor('blue');
  }

  private changeColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }
}
  1. Use the directive in a component template:
<p appTextColor>Click this text to change its color to blue.</p>

Common Mistakes and Tips

  • Forgetting to Declare the Directive: Ensure that the directive is declared in the declarations array of your module.
  • Incorrect Selector Usage: Make sure the selector is used correctly in the template.
  • Direct DOM Manipulation: Avoid direct DOM manipulation using ElementRef.nativeElement. Use Renderer2 for safe DOM manipulation.

Conclusion

In this section, we learned how to create custom directives in Angular. We explored the key concepts, created a custom directive step-by-step, and practiced with an exercise. Custom directives are a powerful way to extend the functionality of your Angular applications by adding custom behavior to your elements. In the next section, we will dive into built-in pipes and how to create custom pipes.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved