# 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:**

```plaintext
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:**

```plaintext
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:**

```plaintext
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:**

```plaintext
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:**

```plaintext
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://v17.angular.io/docs)
    
* [https://www.tutorialspoint.com/angular8/index.htm](https://www.tutorialspoint.com/angular8/index.htm)