three types of directive in angular, 1.Component directive Components are directives with a template. The @Component code that you see in your ts file is a component directive that are composed of template, login and it's styling. import { Component } from '@angular/core'; @Component({ selector: 'app-user', template: '<p>Hello, {{ userName }}!</p>', }) export class UserComponent { userName = 'John Doe'; } 2.Attribute directive These directives alter the behavior or appearance of elements by manipulating their attributes. <!-- ngStyle directive to dynamically set styles --> <div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }"> Styling based on ngStyle </div> <!-- ngClass directive to conditionally apply CSS classes --> <div [ngClass]="{ 'active': isActive, 'error': hasError }"> Applying CSS classes with ngClass </div> 3.Structural directive These directives change the structure of the DOM by adding, removing, or manipulating elements. <!-- *ngIf directive to conditionally render an element --> <div *ngIf="isLoggedIn"> Welcome! You are logged in. </div> <!-- *ngFor directive to loop over a collection --> <ul> <li *ngFor="let item of items">{{ item }}</li> </ul>