magic behind the use of angular directive🤯

In Angular, a directive is a special type of marker in the DOM that can attach behavior to elements in your applications. Directives can modify the appearance or behavior of DOM elements, and Angular provides three types of directives:

types of directive😜:

• Component Directives: These are directives with a template. They are the most common type of directive and are often referred to simply as components. They have their own view (HTML) and logic (TypeScript).

• Attribute Directives: These directives change the appearance or behavior of an element, component, or another directive. For example, ngClass and ngStyle are attribute directives.

• Structural Directives: These directives change the DOM layout by adding and removing DOM elements. Examples include ngIf, ngFor, and ngSwitch.

Component Directives:💻

The component directive comes with template or template URLs that represent something in DOM. So we can say that the component directive is a cleaner version of the Directive as it comes with a template, which is easier to use.

In component directives, you’ll find three main parameters which include:

• selector: It represents the template tag which specifies the starting and end of the Component.

• templateUrl: It defines which particular template is for the component.

• styleUrls: It includes all the types of desing formats for the actual component.

For better understanding, let’s take an example: change-user. directive

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

@Component({
  selector: 'app-example',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class ExampleComponent {}

Attribute Directives:✨

Attribute directives are used to modify the behavior or appearance of elements.Developers can use Attribute directives when they want to change or alter the style of DOM elements and show or remove elements according to a changing property. You might know that Angular offers various built-in Attribute Directives like NgClass, NgStyle, and much more.

<p appHoverHighlight="blue">Hover over this text to see a highlight.</p>

Structural Directives: 📚

Structural directives are responsible for shaping or reshaping the DOM’s structure, typically by adding, removing, or manipulating elements. Examples include *ngIf, *ngFor, and *ngSwitch. three most commonly used built-in structural directives in Angular are:

• NgIf

<div *ngif="”product”">{{product.name}}</div>
<div template="”ngIf" product”="">{{product.name}}</div>
<ng-template [ngif]="”product”">
<div>{{product.name}}</div>
</ng-template>

• Ngfor

<div *ngfor="let product of products">{{product.name}}</div>
<div template="ngFor let product of products">{{product.name}}</div>
<ng-template ngfor="" let-product="" [ngfor]="products">{{product.name}}
</ng-template>

• Ngswitch

<div class="row" [ngswitch]="selectedValue">  
    <div *ngswitchcase="'One'">One is Pressed</div>  
    <div *ngswitchcase="'Two'">Two is Selected</div>  
    <div *ngswitchdefault="">Default Option</div>  
</div>

conclusion:

In conclusion, Angular directives are a fundamental feature that enhances the functionality and interactivity of your web applications. They enable you to create reusable, modular, and maintainable code by encapsulating behavior and presentation logic.