Directives In Angular

The Code Points May 27, 2022 0

In this article, we will learn about the Angular Directives. The most important features of Angular are Angular Directives. Component, Structural, and Attribute Directives are three sorts of directives that Angular provides in this article. We also take a look at a handful of the most popular Angular directives.

What is Angular Directive

The Angular directive allows us to interact with the DOM. The Directives allow you to change the appearance, behavior, or layout of a DOM element. They assist you in extending HTML.

In Angular, there are three types of directives:

• Component Directive
• Structural directives
• Attribute directives

Component Directive

In Angular, components are special directives. They are the directives that have a template attached to them (view) In this article we learned how to create angular Components.

Structural Directives

By adding and removing DOM elements, structural directives can alter the DOM layout. The Asterix emblem appears before all structural directives.

Commonly used structural directives

ngFor

The ngFor structural directive is an Angular directive that repeats a part of the HTML template once for each item in an iterable list (Collection). In AngularJS, ngFor is equivalent to ngRepeat.

Example of ngFor

<tr *ngFor="let customer of customers;">
    <td>{{customer.customerNo}}</td>
    <td>{{customer.name}}</td>
    <td>{{customer.address}}</td>
    <td>{{customer.city}}</td>
    <td>{{customer.state}}</td>
</tr>

You can learn more about the Angular ngFor Directive.

ngSwitch

You can use the ngSwitch directive to add or delete HTML elements based on a match expression. The ngSwitch directive is used in conjunction with the ngSwitchCase and ngSwitchDefault directives.

The example of ngSwitch

<div [ngSwitch]="Switch_Expression"> 
    <div *ngSwitchCase="MatchExpression1”> First Template</div>
    <div *ngSwitchCase="MatchExpression2">Second template</div> 
    <div *ngSwitchCase="MatchExpression3">Third Template</div> 
    <div *ngSwitchCase="MatchExpression4">Third Template</div> 
    <div *ngSwitchDefault?>Default Template</div>
</div>

You can learn more about the Angular ngSwitch Directive.

ngIf

The ngIf  Directives are used to add and delete HTML elements based on a formula. A boolean value must be returned by the expression. The element is removed if the expression is false; else, the element is inserted.

Example of ngIf

<div *ngIf="condition"> 
    This is shown if condition is true
</div>

You can learn more about Angular ngIf Directive article.

Attribute Directives

An attribute or style directive can alter an element's appearance or behavior.

Commonly used Attribute directives

ngModel

To achieve two-way data binding, the ngModel directive is used. The ngModel directive was covered in the Data Binding section of the Angular article.

ngClass

An HTML element's CSS classes can be added or removed using the ngClass. ngClass can be used to create dynamic styles in HTML pages.

Example of ngClass

<div [ngClass]="'first second'">...</div>

ngStyle

ngStyle is used to change the style properties of our HTML elements on a per-element basis. We can also connect these properties to values that the user or our components can change.

Example of ngStyle

<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
    some text
</div>

Building Custom Directives

In Angular, you can also create custom directives. The procedure entails creating a JavaScript class and adding the @Directive attribute to it. The desired behavior can be written in the class.

Conclusion

In this article, we learned about the directives in Angular. In the article, We will go over some of the most significant directives in depth.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.