Directives in Angular

Directives are classes that add additional behaviour to elements in your Angular applications. Using directives we can introduce new behaviour or extend the behaviour of elements in the DOM (Document Object Model).

Directives are markers on a DOM element that tell Angular to attach a particular behaviour to that element or even transform it and its children. The different types of Angular directives are as follows:

1. Component Directives

• Components are a type of directive with a template. They are the building blocks of an Angular application, encapsulating the logic, view, and styles for a specific part of the UI.
• Components are the most common and essential directives in Angular.

2. Attribute Directives

• Attribute directives change the appearance or behavior of a DOM element. They are applied to elements as attributes.
• Examples include NgClass, NgStyle, NgModel and custom directives like [myDirective].

3. Structural Directives

• Structural directives change the structure of the DOM by adding or removing elements. They are recognizable by the asterisk (*) prefix in the HTML.
• Examples include *ngIf, *ngFor, and *ngSwitch.

How to create a custom directive in angular?

Creating a custom directive involves creating a TypeScript class that defines the behaviour of the directive, and then associating that class with an HTML attribute using the @Directive decorator.

Here's a step-by-step guide on how to create a custom directive in Angular:

1. Create a new directive using angular cli command:

ng generate directive my-custom-directive

Lets create a directive which we will implement for hover functionality on an element. let name the directive as “highlighted”

ng generate directive directices/highlighted

Note: I am creating the directive in a specific “directives” folder.

2. Define the logic:

Update the code in highlighted.directive.ts file

import { Directive, HostBinding, HostListener } from "@angular/core";

@Directive({
  selector: "[highlighted]",
})
export class HighlightedDirective {
  isHighlighted = false;

  constructor() {}

  @HostListener("mouseover")
  mouseOver() {
    this.isHighlighted = true;
  }

  @HostBinding("class.highlighted")
  get cssClasses() {
    return this.isHighlighted;
  }

  @HostListener("mouseout")
  mouseOut() {
    this.isHighlighted = false;
  }
}

Here in this example, I am trying to add a “highlighed” class on an element whenever the user will hover on that element and remove that class whenever the user will move cursor out of that element.

3. Register the Directive:

To use the directive, you need to register it in the declarations array of your module. Open the module file (e.g., app.module.ts) and import the directive and add it to the declarations array.

import { HighlightedDirective } from './directives/highlighted.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightedDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

4. Apply the Directive in HTML:

<course-card highlighted></course-card>

<div class="top-menu" highlighted></div>

The highlighted attribute corresponds to the selector defined in the @Directive decorator. Whenever you hover to the elements it will add the “highlighed” class on that element.

In Summary, Custom directives allow you to encapsulate the complex behaviour, enhancing code modularity and reusability. Create directives when you have a specific piece of functionality that can be applied across different components or views and for tasks that involve direct interaction with the DOM, such as handling events, modifying styles, or creating dynamic elements.