This document outlines an AngularJS certification training agenda that covers directives. It defines directives as classes that extend HTML and transform the DOM. There are three types of directives: components, structural directives, and attribute directives. Built-in directives like NgFor and NgIf are covered, which add and remove elements. The document demonstrates how to create a custom attribute directive by using the @Directive decorator and accessing native DOM elements.
2. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Agenda
❖ Why we need Angular Directive?
❖ What is Angular Directive?
❖ Types of Angular Directive
❖ Built-in Angular Directives
❖ Working with Custom Angular Directives
5. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Component 1
Component 2
{ }
{ }
Component 4
Component …
Component 3
Component …
{ }
{ }
{ }
{ }
Component 1
Component 2
{ }
{ }
Component 4
Component …
Component 3
Component …
{ }
{ }
{ }
{ }
DirectiveCreate a with required
behavior
Just Import the Directive to all
Components
Directives can be imported anywhere providing similar functionality
Directive
Directive
Directive
Directive
Directive
Directive
Why we need Directive?
6. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Why we need Directive?
Code modular & manageable
Reusable code
Separating that code out from the view, helps developer to
focus on UI and application logic separately
Available as a stand-alone reusable unit
8. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Directives Introduction
Directives extend HTML
with new attributes
DOM is transformed according
to directives instructions
Appear within an element tag
9. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Directives Introduction
Angular provides a set of built-in
directives which offers functionality
Create custom directives
A directive is a class with a
@Directive decorator
11. www.edureka.co/angular-jsEDUREKA ANGULAR-JS CERTIFICATION TRAINING
Types of Angular Directives
Components
1
Structural Directives
2
Attributes Directive
3
Directives with a template
Adds & removes DOM elements to change DOM layout
Changes the appearance or behavior of an element
12. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Component Directive
@Component decorator is a @Directive decorator
extended with template-oriented features
A component is technically a directive-with-a-template
13. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Structural Directives
Structural directives alter layout by adding, removing, and replacing elements in DOM.
*ngFor tells Angular to stamp out one
<li> per course in the courses list.
*ngIf includes the CourseDetail
component only if a selected course exists
14. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Attribute Directives
Attribute Directive alter the appearance or
behavior of an existing element
Displays value property and responds to
changing events
ngModel modifies the behavior of an
existing element
16. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass NgClass is used for class binding – adding or
removing several classes
Adding an NgClass property binding sets the
element's classes accordingly
17. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgStyle helps in style binding
NgStyle directive is a better choice while
setting many inline styles
18. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass
Adds an element subtree to the DOM by
binding an NgIf directive
Binding to a false expression removes the
element subtree from the DOM
VISIBILITY AND NGIF ARE NOT THE SAME
19. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgSwitch displays one element from a set of
element trees based on conditions
Returns a switch value
20. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass
At any particular moment, at most one of these
spans is in the DOM
3 collaborating directives are at work here:
ngSwitch
1
ngSwitchCase
2
ngSwitchDefault
3
bound to an expression that returns the switch value
bound to an expression returning a match value
a marker attribute on the default element
21. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Built-in Angular Directives
NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgFor is a repeater directive - presents a list of
items
22. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
* and template
* modify HTML layout with the help of
templates
NgFor, NgIf, and NgSwitch adds and removes
elements
25. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
provides the functionality of
the @Directive decorator.
27. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Subscribe to events of the
DOM element
28. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Allows data to flow from the binding
expression into the directive
29. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Contains the directive
metadata in a
configuration object
30. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Identifies the HTML in the template
that is associated with the directive
31. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Directive Class that performs
operation
32. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Grants direct access to the DOM
element through
its nativeElement property
33. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js
Custom Attribute Directive
Listens to the event and perform
accordingly