What are directives in Angular?

Directives are classes that add additional behavior to elements in your Angular applications. They allow you to manipulate the DOM by changing the appearance, structure, or behavior of DOM elements, components, or other directives.

What are Directives?

In Angular, directives are a fundamental building block. They are essentially instructions to the DOM. When Angular finds a directive in an HTML template, it executes the logic defined by that directive to modify the DOM element it's attached to, or its children.

Types of Angular Directives

Angular classifies directives into three main types, each serving a distinct purpose in how they interact with the DOM and application logic.

1. Component Directives

Components are the most common type of directive. They are directives with a template. Every Angular application is essentially a tree of components. They define a view and associated logic. They are decorated with an @Component() decorator.

@Component({
  selector: 'app-my-component',
  template: '<h1>Hello from Component!</h1>',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent { }

2. Structural Directives

Structural directives are responsible for shaping or reshaping the DOM's structure, typically by adding, removing, or manipulating elements and their children. They are easily recognizable by the asterisk (*) prefix before their attribute name.

• *ngIf: Conditionally adds or removes elements from the DOM.
• *ngFor: Repeats a given element for each item in a collection.
• *ngSwitch: Renders one of a set of elements based on a switch condition.

<div *ngIf="isValid">
  Content is valid.
</div>

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

3. Attribute Directives

Attribute directives change the appearance or behavior of a DOM element, component, or another directive. They look like regular HTML attributes and do not directly affect the structure of the DOM.

• NgClass: Adds and removes CSS classes conditionally.
• NgStyle: Adds and removes inline CSS styles conditionally.
• Custom Attribute Directives: You can create your own directives to add specific behaviors.

<p [ngStyle]="{'background-color': 'yellow', 'font-weight': 'bold'}">
  This text is styled with NgStyle.
</p>

Creating Custom Directives

While Angular provides several built-in directives, you can also create custom directives to encapsulate reusable DOM manipulation logic that is specific to your application's needs. This is typically done for attribute directives.

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string = 'yellow';

  constructor(private el: ElementRef) { }

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

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

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}