Uploaded byEdureka!
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular Training | Edureka
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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING www.edureka.co/angular-js Why We Need Angular Directive?
- 4. EDUREKA ANGULARJS CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING www.edureka.co/angular-js What is Angular Directive?
- 8. EDUREKA ANGULARJS CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING www.edureka.co/angular-js Types of Angular Directive
- 11. www.edureka.co/angular-jsEDUREKA ANGULAR-JS CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING www.edureka.co/angular-js Built-In Angular Directives
- 16. EDUREKA ANGULARJS CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING 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 CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive
- 24. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Directive
- 25. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive provides the functionality of the @Directive decorator.
- 26. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive It can access the DOM element
- 27. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Subscribe to events of the DOM element
- 28. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Allows data to flow from the binding expression into the directive
- 29. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Contains the directive metadata in a configuration object
- 30. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Identifies the HTML in the template that is associated with the directive
- 31. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Directive Class that performs operation
- 32. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Grants direct access to the DOM element through its nativeElement property
- 33. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Attribute Directive Listens to the event and perform accordingly
- 34. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Custom Structural Directive
- 35. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Hands-On
- 36. EDUREKA ANGULARJS CERTIFICATIONTRAINING www.edureka.co/angular-js Thank You … Questions/Queries/Feedback