By this PPT you can easily understand what angular directive is. This is just basic for a new user.

1. ANGULAR
DIRECTIVES

2. HELLO!
I am Rajneesh
2

3. What is Angular
Directive?

4. “
A directive allows you to attach a
behavior to DOM elements.
4

5. Types of Angular
Directives
5

6. 6

7. Types : -
Components Directives
Directives with a
template.
E.g : Normal
Components made by
user with angular CLi
“ng g c CompName”
Structural directives
Change the DOM
layout by adding and
removing DOM
elements.
E.g: ngFor ,ngIf
Attribute directives
Change the
appearance or
behavior of an
element, component,
or another directive.
E.g: ngModule
7

8. Built-In Angular
Directives
8

9. 9
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Built-In Angular Directives : -
● NgClass is used for class binding/adding or
removing several classes.
<[ngClass] = “{online: status ==== ‘online’}”>

10. 10
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Built-In Angular Directives : -
● NgStyle helps in Style Binding
● It is used when you want to change the style of
your web page dynamically.
<[ngClass] = “{online: status ==== ‘online’}”>

11. 11
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Built-In Angular Directives : -
● The ng-if directive removes the HTML element if
the expression evaluates to false.
● If the if statement evaluates to true, a copy of
the Element is added in the DOM.
<div *ngIf = “2>1”><h1>yes<h1></div>

12. 12
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Built-In Angular Directives : -
● NgSwitch display one element from a set of
element trees based on condition.
● Work like switch statement and return switch
value.

13. 13
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Built-In Angular Directives : -
● NgFor is a repeater directive - present a list of
multiple products
● You can use it whenever you see iterations in
the form of array
<div *ngFor=”let user of users”>{{user.name }}</div>

14. THANKS!
Any questions?
14