answer as following,
xxxxxxxxxx
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>