Directives

 Directives:

Directives are classes that add new behavior or modify the existing behavior to the elements in the template.

                                           or

Directives are Custom HTML attributes which tell angular to change the structure, 

style or behavior of thwe DOM elements

Every Tag has its special attributes

Types of directives

1. Component directive
2. Structural directive
3. Attribute directive

Component directive

Components are special directives in Angular. They are the directive with a template

It might confuse you a bit, but if you see the definition of the directive, it says directives are used to manipulate the DOM, so now if you think what component is doing, it is actually showing something in DOM, hence we can say component is also a directive with a template (template or templateUrls).

Structural directive

Structural directives are used to - change the DOM layout by adding and removing DOM elements. It basically changes the structure of the DOM
Examples of structural directives are ngIf, ngFor, ngSwitch.

*ngIf — adds or removes element from DOM.
*ngFor — renders list of elements on every iteration.

*ngSwitch - It similar to Switch Case.

All structural Directives are preceded by Asterix (*)symbol.

Attribute directive

Attribute directives are used to - change the appearance or behavior of an element.

Examples of attributes directives are ngStyle, ngClass, ngModel

ngStyle — used to apply styles that will change the appearance.
ngClass — used to apply CSS classes to change the appearance. 

ngModel  - used to add two-way data binding to an HTML  from elements.