This Angular 4 tutorial will introduce you to the Angular Data Binding concept. To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg.

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: