Angular Directives

Directives are classes that allow you to add behaviour to elements in your Angular application. They are one of the fundamental building blocks of Angular that make it highly dynamic. There are two primary types of directives:

1. Attribute Directives: Modify the behaviour or appearance of an element.
2. Structural Directives: Change the structure of the DOM (Document Object Model).

Let’s dive into each category with examples.

Attribute Directives

NgClass

The NgClass directive is used to dynamically add or remove CSS classes from an element based on conditions. This is useful for styling elements dynamically.

<div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }">
  This element's class will change dynamically.
</div>

<button [ngClass]="{'btn-primary': isPrimary, 'btn-secondary': !isPrimary}">
  Click me
</button>

// Component
export class AppComponent {
  isActive  = true;
  isHighlighted = true;
  isPrimary = true;
}

In this example, the button’s class will be dynamically changed between btn-primary and btn-secondary based on the value of isPrimary

NgStyle

The NgStyle directive allows you to apply inline styles to an element dynamically. It is similar to ngClass, but instead of modifying the class, it modifies the styles directly.

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">
  This element's style will change dynamically.
</div>

<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">
  Styled Text
</div>

// Component
export class AppComponent {
  textColor = 'blue';
  fontSize = '20px';
}

In this example, the color and font-size properties of the element are dynamically applied based on the component’s values.

NgModel

The NgModel directive facilitates two-way data binding between the model and the view. It binds input elements (e.g., text boxes) to component properties and allows for automatic updates when the model changes and vice versa.

<input [(ngModel)]="userName" placeholder="Enter your name" />
<p>Hello, {{ userName }}</p>

// Component
export class AppComponent {
  userName = '';
}

In this example, the input box is bound to the userName property in the component, and changes to the input box are reflected in the paragraph element.

Structural Directives

NgIf

The NgIf directive conditionally includes or removes an element from the DOM based on the truthiness of an expression. If the expression evaluates to true, the element is included in the DOM; otherwise, it is removed.

<div *ngIf="isLoggedIn">Welcome, User!</div>

// Component
export class AppComponent {
  isLoggedIn = true;
}

In this example, the message “Welcome, User!” will only be shown if isLoggedIn is true.

NgFor

The NgFor directive is used for iterating over a collection (e.g., an array or a list) and creating a template for each item in the collection.

<ul>
  <li *ngFor="let fruit of fruits">{{ fruit }}</li>
</ul>

// Component
export class AppComponent {
  fruits = ['Apple', 'Banana', 'Cherry'];
}

In this example, the NgFor directive iterates over the fruits array and creates a new <li> element for each fruit.

NgSwitch

The NgSwitch directive is used to conditionally display different templates based on a given switch expression. It is often used in conjunction with NgSwitchCase and NgSwitchDefault to create conditional logic.

<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">This is red</div>
  <div *ngSwitchCase="'green'">This is green</div>
  <div *ngSwitchDefault>This is a default color</div>
</div>

<div [ngSwitch]="userRole">
  <p *ngSwitchCase="'admin'">You have admin access</p>
  <p *ngSwitchCase="'user'">You have user access</p>
  <p *ngSwitchDefault>Access level unknown</p>
</div>

// Component
export class AppComponent {
  color = 'green';
  userRole = 'admin';
}

In this example, the message displayed depends on the value of the userRole. If the role is “admin”, the first message will be shown; otherwise, it will fall back to the default message.

Conclusion

Directives in Angular are a powerful way to add dynamic behavior to elements in your application. By using attribute directives like NgClass, NgStyle, and NgModel, you can modify the appearance and behavior of elements. Structural directives like NgIf, NgFor, and NgSwitch allow you to manipulate the DOM by conditionally including or iterating over templates.

By leveraging these directives, you can create flexible, dynamic, and interactive Angular applications.