Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka
7 likes1,654 views
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.
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka
- 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
- 3. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Why We Need Angular Directive?
- 4. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js 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…
- 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
- 7. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js What is Angular Directive?
- 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
- 10. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Types of Angular Directive
- 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
- 15. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Built-In Angular Directives
- 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
- 23. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Custom Attribute Directive
- 24. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Custom Attribute Directive Directive
- 25. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Custom Attribute Directive provides the functionality of the @Directive decorator.
- 26. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Custom Attribute Directive It can access the DOM element
- 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
- 34. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Custom Structural Directive
- 35. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Hands-On
- 36. EDUREKA ANGULARJS CERTIFICATION TRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback