How to use directive in angular 7

                                              (Angular Directive Example)

 Angular Directive may be a category with a @Directive decorator. Decorators are the functions that modify JavaScript categories. The decorators' are used for attaching data to categories because it is aware of the configuration of these categories and the way they must work. you'll be shocked to grasp that the part is additionally a directive-with-a-template. The @Component decorator may be a @Directive decorator extended with template-oriented options.

Angular Directive Example Tutorial

Two Three of Angular Directive:

1. Components
2. Structural
3. Attribute

1. Structural Directives

Structural directives reconstruct the layout by adding, removing, and substitution parts in DOM. The structural directives are to blame for form or reshape the DOM’s structure, usually by adding, deleting, or modifying parts.

kind of like the opposite directives, you apply the structural directive to a bunch component. The directive then performs no matter it's meant to try and do thereupon host component. The structural directives are terribly easy to acknowledge. 

associate degree asterisk (*) precedes the directive attribute name. It doesn't need brackets or parentheses like attribute directive.

Let us take an associate degree example. Generally, we loop through a data from the backend and display inside the table. 

It is the general case scenario in the web application. At that time, we use the *ngFor directive to loop through the data.

<table class="table"> <thead> <tr> <td>Ad FirstName</td> <td>Ad Price</td> <td >action</td> </tr> </thead> <tbody> <tr *ngFor="let i of data"> <td>{{ i.name }}</td> <td>{{ i.price }}</td> </tr> </tbody> </table>

So, within the on top of example, we've loop through the additional units and show the ad unit one by one. 3 of the quality, intrinsical structural directives ar NgIf, NgFor, and NgSwitch. 

The Directives is written in each the UpperCamelCase and lowerCamelCase as a result of NgIf refers to a directive category & ngIf refers to a directive’s attribute name.

2.Attribute Directives

An Attribute directive changes the looks or behavior of a Document Object Model(DOM) part. The attribute directives square measure used as attributes of components. The integral NgStyle directive within the model Syntax guide, for instance, will modification many part designs at an identical time.

write this command :

ng g directive directive_name

inside folder

cd directive

Angular new  Directive create using the following command 

ng g directive active

import { Directive } from '@angular/core'; @Directive({ selector: '[appActive]' }) export class ActiveDirective { constructor() { } }