Angular JS

Angular Directives

February 01, 2022



 To give the normal HTML element an extra power the Angular introduced the concept of Directive. It is a class that does all the trick/ magic internally/ behind the scene.

So lets dive in to understand the various directives available in Angular.
There are broadly three different types of directives -

  • Component Directive - (Will talk about it at the very end)

    • Attribute Directive
      1. ngClass
      2. ngStyle
      3. ngModel

    • Structural Directive
      1. ngIf
      2. ngFor
      3. ngSwitch


Attribute Directives
Directives that changes the behavior of HTML element's attributes on which it has been used. Behavior includes CSS style CSS class etc.

ngClass
This directive adds or removes CSS class on the element it has been added to on the basis of a condition.