Structural Directives!

Hi Everyone! Hope you all doing good.

In this article, I’m going to write about some basic things in structural directives in Angular.

First, let’s think about directives!

Angular Directive is basically a class with a @Directive decorator. You might be wondering what are decorators? Decorators are functions that modify JavaScript classes. Decorators are used for attaching metadata to classes, it knows the configuration of those classes and how they should work.

Image src: https://medium.com/@nishu0505/custom-directives-in-angular-5a843f76bb96

There are three kinds of directives in Angular:

1. Components: Directives with a template.
2. Structural directives: change the DOM layout by adding and removing DOM elements.
3. Attribute directives: change the appearance or behaviour of an element, component, or another directive.

Let’s go deeply about Structural Directives!

Structural directives are responsible for HTML layout. They change the DOM’s structure, typically by adding, removing, or manipulating elements.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name.

For example in src/app/app.component.html (ngIf) file,

<div *ngIf="customer" class="name">{{customer.name}}</div>

There are three built-in structural directives, NgIf, NgFor and NgSwitch.

NgIf

<div *ngIf="show">
  <p>This is my ng-If directive test.</p>
</div>

NgFor

<ul>
  <li *ngFor="let item of items;>
    {{item.name}}
  </li>
</ul>

NgSwitch

<div [ngSwitch]="selected">
  <div *ngSwitchCase="'Raja'">You have select "Raja"</div>
  <div *ngSwitchCase="'Rakesh'">You have select "Rakesh"</div>
  <div *ngSwitchCase="'Thinesh'">You have select "Thinesh"</div>
</div>

Conclusion

I hope you all get some knowledge about structural Directives,

Thank you so much for reading!

References : https://angular.io/guide/structural-directives