What is the Directive in Angular?

What is the directive in Angular?

Directives are one of the core features in Angular, which helps to extend and customize the HTML elements and attach it to the DOM. In the development often creating many user Interfaces, during the development the directives will provide flexible support to modify the styles, manage the user Inputs, and manipulate the DOM much easier.

Different types of Directives in Angular

1. Component directive
2. Structural directives
3. Attribute directives.

1. Component Directives

 These are the most commonly used directives in Angular application development.

@Component({
  selector: 'app-first-payment',
  templateUrl: './first-payment.component.html',
  styleUrls: ['./first-payment.component.css']
})

Components are directive with associated with templates. Components are tie and link with Templates and style along with logic.

2. Structural directives

ngIf, ngFor, and ngSwitch are the predefined structural directives. These directives are used quite often in the development to modify the HTML functionality.  In the development, it provides flexibility, structures the html elements, and binds them to the DOM.

<button *ngIf="showButton"> Save </button>

3. Attribute directives

Modify the appearance of the HTML elements, for Ex, ngClass, ngStyle, ngModel

These directives are quite useful in changing the element's behavior or appearance.

<div 
  [style]="item.promo ? {
    background: '#f4f4f4',
    border: '1px solid #dcdcdc'
  }: null">
  
<!-- application functionality --/>
</div>