Activity 12: Research Angular Directives

In Angular, directives are special markers on a DOM element that instruct Angular to do something to that element (or its children). Directives are a core feature of Angular and are used to extend the HTML by attaching custom behavior to elements or manipulating their structure.

There are three types of directives in Angular:

1. Component Directives

2. Structural Directives

3. Attribute Directives

---

1. Component Directives

Definition:

• Component directives are the most common directives in Angular. Every component in Angular is essentially a directive with a template. These directives define how the HTML interface (view) should look.

Key Features:

• Have an associated template (HTML).

• Component classes define behavior, while the HTML defines the view.

• They encapsulate both the view and logic for the component.

Use Cases:

• Creating reusable components in Angular applications (e.g., buttons, forms, navigation bars).

Example Code:

typescriptCopy code// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>{{ message }}</h1>`,
})
export class HelloComponent {
  message: string = "Hello, Angular!";
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';

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

Explanation:

• The HelloComponent is a component directive with a simple template (<h1>). It encapsulates the behavior (message property) and view (HTML template) in one directive.

---

2. Structural Directives

Definition:

• Structural directives change the structure of the DOM by adding or removing elements. They typically start with an asterisk (*).

Key Structural Directives:

• *ngIf: Adds or removes an element based on a condition.

• *ngFor: Iterates over a collection and creates elements dynamically.

Use Case: *ngIf

• Conditional Rendering: Show or hide elements based on conditions.

Example Code:

htmlCopy code<!-- app.component.html -->
<div *ngIf="isLoggedIn">Welcome, user!</div>
<div *ngIf="!isLoggedIn">Please log in.</div>

Explanation:

• The *ngIf directive shows or hides the div based on the value of isLoggedIn.

Use Case: *ngFor

• Looping through Arrays: Render elements for each item in an array.

Example Code:

htmlCopy code<!-- app.component.html -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

Explanation:

• The *ngFor directive loops through the items array and creates an <li> element for each item in the array.

Time Complexity:

• *ngIf and *ngFor directives run at O(1) and O(n) respectively, where n is the number of iterations or conditions being checked.

---

3. Attribute Directives

Definition:

• Attribute directives change the appearance or behavior of an element without changing its structure. These directives are used to dynamically apply classes, styles, or modify properties of elements.

Key Attribute Directives:

• ngClass: Dynamically bind one or more classes to an element.

• ngStyle: Apply dynamic styles based on expressions.

Use Case: ngClass

• Dynamic Class Binding: Change classes based on component state.

Example Code:

htmlCopy code<!-- app.component.html -->
<button [ngClass]="{ 'active': isActive }">Toggle</button>

Explanation:

• The ngClass directive dynamically applies the active class to the button based on the value of isActive.

Use Case: ngStyle

• Dynamic Style Binding: Apply inline styles dynamically.

Example Code:

htmlCopy code<!-- app.component.html -->
<div [ngStyle]="{ 'background-color': isActive ? 'green' : 'red' }">
  Status: {{ isActive ? 'Active' : 'Inactive' }}
</div>

Explanation:

• The ngStyle directive dynamically applies a background color to the div based on the value of isActive.

---

Practical Use Cases of Angular Directives

1. Component Directives:

   • Used for creating reusable components (buttons, headers, footers).

   • Example: A UserProfileComponent that renders user information across different views.

2. Structural Directives:

   • *ngIf: To show or hide elements based on user login status, form validity, or other conditions.

   • *ngFor: To render a list of items, such as displaying a list of products in an e-commerce app.

3. Attribute Directives:

   • ngClass: To apply styles based on conditions, such as highlighting an active menu item.

   • ngStyle: To apply dynamic styles, such as changing font size or color based on user input.

---

Research Sources:

• https://v17.angular.io/docs

• https://www.tutorialspoint.com/angular8/index.htm