Directives in Angular

Directives

Directives are instructions in the DOM, which tells the angular to change the style or behavior of the DOM elements. Directives are just a typescript class, with a @Directive() decorator. There are mainly four types of directives available in angular, which includes the following-

• Components Directives.
• Structural Directives.
• Attribute directives.
• Custom Directives.

Components Directives

Component directives are one of the most commonly used directives in Angular. It is also known as self-contained directives. Component directives controls the details about how the component should be instantiated, processed and utilized at runtime.

										    
											@Component({
											    selector: 'app-root',
												template: `<h1>Tutorials Logic</h1>`
											})
											
											export class AppComponent {}
											
										

Structural Directives

Structural directives can reconstruct the layout by adding, removing, and replacing elements in DOM. It start with a * (i.e. asteric) sign. Angular has two inbuilt structural directives i.e. *ngIf and *ngFor.

										    
											<p *ngIf="isActive">Active</p>
											
										

Attribute directives

An attribute directives are used to change the appearance or behavior of a DOM element. Angular has inbuilt attribute directives i.e. [ngStyle], [ngClass], and [ngSwitch]. [ngSwitch] is an attribute directive, which is used in combination with *ngSwitchCase that is a structural directive.

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

Custom Directives

We can create custom directives using a @Directive decorator. Below are the steps to create custom directive-