Directives in Angular

In this post you will get to know about Angular 8|9 Directives. What are the directives in angular and what types are there?

Basically directives are the elements which change the appearance or behavior of DOM elements. There are three types of Directives:

Directives in Angular

Component Directives

Component directive is nothing but a @component decorator function which is present in every component, which tells how the component should be initialized, it is not possible to render template without selector

Below is the example of @component directive

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

Structural Directives

Structural Directives manipulates render data from typescript to the DOM

Structural directives include *ngIf and *ngFor.

Below is the example of structural directives

<div *ngFor="let list of StudentData">
        <div class="col-md-1">
            <h5>{{list.title}}</h5>
	 </div>
</div>

Attribute Directives

Attribute Directives is a way to change appearence or behaviour of DOM element, or component

We use Attribute directives to apply style to the elements also to show or hide elements dynamically.

Basically there are two types of Attribute Directives i.e. NgStyle and ngClass

NgStyle:

Angular provides built-in directive to change the behaviour of Dom element by adding or removing styles dynamically.

ngClass:

This is also one of the built-in directive used to dynamically add or remove css class in Dom.