Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka

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

Why We Need Angular Directive?

Component 1
Component 2
{ }
{ }
Component 4
Component …
Component 3
Component …
{ }
{ }
{ }
{ }
Why we need Directive?
Component 1
Component 2
{ }
{ }
Component 4
Component …
Component 3
Component …
{ }
{ }
{ }
{ }
Changing code for Component 1
Similarly changing code for each components individually…

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

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

What is Angular Directive?

Directives Introduction
Directives extend HTML
with new attributes
DOM is transformed according
to directives instructions
Appear within an element tag

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

Types of Angular Directive

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

Component Directive
@Component decorator is a @Directive decorator
extended with template-oriented features
A component is technically a directive-with-a-template

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

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

Built-In Angular Directives

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

NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgStyle helps in style binding
NgStyle directive is a better choice while
setting many inline styles

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

NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgSwitch displays one element from a set of
element trees based on conditions
Returns a switch value

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

NgStyle
NgIf
NgSwitch
NgFor
NgClass
NgFor is a repeater directive - presents a list of
items

* and template
* modify HTML layout with the help of
templates
NgFor, NgIf, and NgSwitch adds and removes
elements

Custom Attribute Directive

Directive

provides the functionality of
the @Directive decorator.

It can access the DOM
element

Subscribe to events of the
DOM element

Allows data to flow from the binding
expression into the directive

Contains the directive
metadata in a
configuration object

Identifies the HTML in the template
that is associated with the directive

Directive Class that performs
operation

Grants direct access to the DOM
element through
its nativeElement property

Listens to the event and perform
accordingly

Custom Structural Directive

Hands-On

Thank You …
Questions/Queries/Feedback

Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka

More Related Content

What's hot

Similar to Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka

More from Edureka!

Recently uploaded

Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka