Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutorial | Edureka
32 likes•4,541 views
The document provides an overview of a free Angular course by Edureka aimed at beginners, covering topics such as Angular components, data binding, directives, and services. It explains the concept of components as the template/view and the business logic, emphasizing the importance of data binding for communication between the view and business logic. Various types of data binding, including interpolation, property binding, and event binding, are also discussed.
![Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Types of Data Binding
Interpolation
Property Binding
COMPONENT[property] = “value”
01
02
03
04
I N T E R P O L A T I O N
P R O P E R T Y B I N D I N G
E V E N T B I N D I N G
2 W A Y D A T A B I N D I N G
COMPONENT
(event) = “event handler”
[( ngModel )]
COMPONENTDOM
{{ value }}
T Y P E S O F D ATA B I N D I N G
Data binding plays an important role in communication between
a template and its component
DOM
DOM
DOM COMPONENT](https://image.slidesharecdn.com/angulardatabinding-171006115040/85/Angular-4-Data-Binding-Two-Way-Data-Binding-in-Angular-4-Angular-4-Tutorial-Edureka-7-320.jpg)
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutorial | 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 Component? Template or View Component < > Business Logic
- 4. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is Data Binding?
- 5. Copyright © 2017, edureka and/or its affiliates. All rights reserved. What is Data Binding? Business Logic (TypeScript) Template/View (HTML) C O M M U N I C A T I O N Data Binding is the connection bridge between View and the business logic (View Model) of the application.
- 6. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Types of Data Binding
- 7. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Types of Data Binding Interpolation Property Binding COMPONENT[property] = “value” 01 02 03 04 I N T E R P O L A T I O N P R O P E R T Y B I N D I N G E V E N T B I N D I N G 2 W A Y D A T A B I N D I N G COMPONENT (event) = “event handler” [( ngModel )] COMPONENTDOM {{ value }} T Y P E S O F D ATA B I N D I N G Data binding plays an important role in communication between a template and its component DOM DOM DOM COMPONENT
- 8. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Demo
- 9. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Interpolation and Property Binding Component Data Property Target Element Property Component A Template A Parent Component Child Component 1 2 Example: data data
- 10. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Demo
- 11. Copyright © 2017, edureka and/or its affiliates. All rights reserved. Two Way Data Binding Component { } Template < > property binding event binding Example: