Angular 4 Directives | Angular 4 Tutorial For Beginners | Angular 4 Directives Example | Edureka
2 likes356 views
The document is an overview of the Edureka free Angular course, detailing various concepts such as directives, data binding, and components. It covers types of directives, their functions, and the significance of creating custom directives for modular and manageable code. Additionally, it highlights built-in structural and attribute directives, demonstrating their roles in manipulating and managing DOM elements.
Angular 4 Directives | Angular 4 Tutorial For Beginners | Angular 4 Directives Example | Edureka
- 1. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Edureka Free Angular Course For Beginner
- 2. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Angular Tutorial - Road Covered So Far Angular Introduction Angular Install & Project Structure Angular Components Angular Data Binding Angular Directives Angular & angularFirebase Angular CRUD App Angular Services Angular Forms Angular Routing 1 10 9 8 7 6 1 2 3 4 5 678910
- 3. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is a Directive?
- 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is Directive? Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by Directives. Directives DOM Tree manipulates
- 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Types of Angular Directives
- 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Types of Data Binding 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
- 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Built-in Structural Directive
- 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Built-in Structural Directives Structural Directives 2 Adds & removes DOM elements to change DOM layout NgFor NgIf NgSwitch a b c Adds or Removes an element from the DOM Repeater directive that iterates over collection of data Displays one element out of multiple elements based on a switch condition
- 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Built-in Attribute Directive
- 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Built-in Attribute Directives Structural Directives 2 Attribute Directives 3 Changes the appearance or behavior of an element NgStyle NgClass NgModel a b c Adds and Removes CSS classes dynamically Sets inline styles dynamically based on the state of the component Displays a data property and updates it as per the user interaction
- 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Creating Custom Directive
- 12. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why we need Directives?
- 13. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Why we need Directives? 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