Directives in Angular : A Beginners Guide

In this tutorial, we will learn about directives in angular and its uses in easy way.

So, let's get started...

What is Directive in Angular?

Directives are the mechanism of Angular2, which use to extend the HTML Elements and attributes in Angular Application.

Angular application mainly based on Directives.

A directive is a class with a @Directive decorator.

Directive also guide compiler to render specific view or behavior for certain HTML elements or attribute, They are also key part of Angular Apps and components are also subset of Angular Directives so that’s why you can also call component as one type of Directive.

Also read, How to use @input Decorator in Angular

How Directive Extend HTML elements and Attributes in Angular?

Directives have built-in DOM attributes which are not listed in HTML5 document, for example ngClass, ngStyle, ngModel.

Directives also allow developers to create custom HTML elements with templates and attributes and use them into application. for example <app-root>,<app-demo> selectors used in components.

Types of Directives in Angular

In angular there is following three types of Directives available:

1.Attribute Directives : 

Attribute Directives Change the appearance or behavior of an element, component or another directive.

Eg : ngClass, ngStyle

2.Structural Directives :

Structural Directives change the DOM layout by adding and removing DOM elements.

Eg : *ngIf,*ngFor,*ngSwitch

3.Components :

Components Directives are directives with the template.  Attribute and Structural Directives are used in Components template.

Eg: <app-root>,<wishlist>

Conclusion:

Do let me know If you face any difficulties please feel free to comment below we love to help you.

if you have any feedback suggestion then please inform us by commenting.

Don’t forget to share this tutorial with your friends on Facebook and Twitter