Types of Angular Directives

Angular has 3 different types of directives

       1.       Component Directive 

       2.       Structural Directive &

       3.       Attribute Directive

Component Directives are noting but the Angular Components, these directives have a class and a template, the class defines the logic and the template acts as the view of the component. The other 2 types of directives do not have a view template they have only classes.

Structural Directives are the ones which alter the behavior of the DOM based on some conditions, for example the ngIf is a built-in structural directive which can show or hide specific DOM elements based on specific conditions. We can also create our own custom structural directives and use them in the components.

Attribute Directives are the ones which are applied to specific DOM elements and alter the behavior of the element. For example the ngClass is a built-in attribute directive which applies specific styles to the element on which this directive is used. We can create custom attribute directives and apply them to elements in the view.