# Activity 11: Research Angular Directives

### 1\. Definition of Angular Directives

**Angular Directives** are markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even to transform the DOM element and its children. They enhance the functionality of HTML in Angular applications.

### 2\. Types of Angular Directives

#### A. Component Directives

* **Definition**: These are directives with a template. A component directive creates a new component and is defined with a class.
    
* **Use Case**: Used for creating reusable components, such as buttons, forms, or cards.
    

##### Example Code:

```abap
import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  template: '<button (click)="handleClick()">{{ label }}</button>',
})
export class ButtonComponent {
  label: string = 'Click Me';

  handleClick() {
    alert('Button clicked!');
  }
}
```

#### B. Structural Directives

* **Definition**: These directives change the structure of the DOM by adding or removing elements. They are usually prefixed with an asterisk (\*).
    
* **Common Examples**:
    
    * `*ngIf`: Conditionally includes a template based on a boolean expression.
        
    * `*ngFor`: Iterates over a list and generates a template for each item.
        

##### Example Code (ngIf):

```abap
<div *ngIf="isVisible">Content is visible</div>
```

##### Example Code (ngFor):

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

#### C. Attribute Directives

* **Definition**: These directives change the appearance or behavior of an existing element, component, or another directive.
    
* **Common Examples**:
    
    * `ngClass`: Dynamically binds classes to an element.
        
    * `ngStyle`: Dynamically binds inline styles.
        

##### Example Code (ngClass):

```abap
<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">Status</div>
```

##### Example Code (ngStyle):

```abap
<div [ngStyle]="{ 'color': isError ? 'red' : 'black' }">Message</div>
```

### 3\. Use Cases of Angular Directives

* **Component Directives**: Ideal for encapsulating UI elements with their own logic, making it easy to maintain and reuse.
    
* **Structural Directives**: Useful for dynamically managing the display of elements based on application state, such as showing or hiding content based on user input.
    
* **Attribute Directives**: Great for applying styles and classes conditionally, enhancing user interaction without needing additional logic in the component.
    

### 4\. Code Snippets and Examples

#### Conditional Rendering with \*ngIf

```abap
<div *ngIf="user.isLoggedIn">Welcome, {{ user.name }}!</div>
```

#### Looping through items with \*ngFor

```abap
<ul>
  <li *ngFor="let task of tasks">{{ task.title }}</li>
</ul>
```

#### Dynamic Class Binding with ngClass

```abap
<div [ngClass]="{ 'highlight': isHighlighted }">This is highlighted</div>
```

#### Dynamic Style Binding with ngStyle

```abap
<div [ngStyle]="{ 'font-size': fontSize + 'px' }">Resizable text</div>
```

**References:**

[https://v17.angular.io/guide/built-in-directives](https://v17.angular.io/guide/built-in-directives)

[https://angular.dev/guide/directives](https://angular.dev/guide/directives)