Directive in Angular

Directive in Angular

What is Directive in Angular?

Angular application mainly based on Directives.

A directive is a class with a @Directive decorator.

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

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 coponent asan type of Directive

How Directive Extend HTML elements and Attributes in Angular?

Directive 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 follwing 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.


3.Components :

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

Eg: <app-root>,<wishlist>

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment