#18 Two way Data Binding | Angular Components & Directives | A Complete Angular Course

Summary

This lecture explains the concept of two-way data binding in Angular. It builds on previous discussions of one-way data binding (property and event binding) by demonstrating how to bind data in both directions—between the component class and the view template. The example provided includes creating a search box component, showcasing how input values update both the view and component class in real time. The video also highlights using Angular's built-in 'ngModel' directive to simplify two-way data binding. This foundational knowledge is essential for implementing dynamic and interactive forms in Angular applications.

Takeaways

• 🔗 One-way data binding involves binding data either from the component class to the view template or vice versa, but not both.
• 🔧 String interpolation and property binding are used to bind data from the component class to the view template.
• 🎯 Event binding is used to bind data from the view template back to the component class.
• 🛠 Two-way data binding allows for data to flow both ways between the component class and the view template, reflecting changes in both directions.
• 📝 An example of two-way data binding is implemented with a search text box in an e-commerce application, where user input updates a property in the component class.
• 📑 The 'search' component is created to handle the search functionality, including a text box and a button.
• 🖌 CSS is used to style the search component for better user interface.
• 🔑 The 'search-text' property in the component class is used to prepopulate the input element in the view template.
• 🔄 Two-way data binding is achieved by combining property binding for setting the initial value and event binding for updating the property when the user types in the input box.
• 📚 The 'FormsModule' from 'angular/forms' must be imported and added to the 'imports' array in the app module to use 'ngModel' for two-way data binding.
• 🔄 Using 'ngModel' simplifies the syntax for two-way data binding, eliminating the need to explicitly combine property and event bindings.

Q & A

What is one-way data binding?

One-way data binding refers to binding data in a single direction, either from the component class to the view template or from the view template to the component class. It is achieved through string interpolation and property binding for component-to-view data flow and event binding for view-to-component data flow.

What are the two main types of one-way data binding?

The two main types of one-way data binding are property binding, where data is passed from the component class to the view template, and event binding, where data is passed from the view template to the component class.

What is two-way data binding?

Two-way data binding allows data to flow in both directions: from the component class to the view template and from the view template back to the component class. It combines both property binding and event binding.

How can two-way data binding be implemented?

Two-way data binding can be implemented by combining property binding and event binding. It can also be achieved using the built-in Angular directive 'ngModel', which simplifies the process.

What is the role of the 'ngModel' directive in two-way data binding?

The 'ngModel' directive is used to achieve two-way data binding in a simplified manner. It binds an input element to a component property, allowing changes in the view to update the component property and vice versa.

What error might you encounter when using 'ngModel' and how can it be fixed?

When using 'ngModel', an error stating 'Can't bind to ngModel since it isn't a known property of input' may occur. This can be fixed by importing the 'FormsModule' from '@angular/forms' and registering it in the 'Imports' array of the module.

What is the initial step when starting to implement the search functionality in the application?

The initial step is to create a new search component inside the 'product-list' component using Angular's 'ng generate' command.

How can you pre-populate an input element with a property value in Angular?

To pre-populate an input element with a property value, you can use one-way property binding by binding the input element's 'value' property to the desired component property using square brackets, e.g., '[value] = searchText'.

What does event binding achieve in this context?

Event binding allows the input event in the text box to update the corresponding component property (e.g., 'searchText') when the user types something in the text box. It ensures that changes in the view are reflected in the component class.

What is the purpose of combining property and event binding?

Combining property and event binding allows two-way data binding, enabling the data to be synchronized between the component class and the view template in both directions. This ensures that any change made in the view is reflected in the component and vice versa.

Outlines

00:00

📘 Understanding One-Way and Two-Way Data Binding

This paragraph introduces the concept of one-way data binding, where data flows in one direction: from the component class to the view template or vice versa. It explains that one-way data binding is achieved through string interpolation and property binding (component to view) or event binding (view to component). It then transitions to two-way data binding, which allows data flow in both directions. Two-way binding ensures changes in the component class reflect in the view and vice versa.

05:00

🔍 Implementing a Search Box in an E-Commerce App

The focus here is on implementing a search functionality in an e-commerce application. The steps include generating a new component for the search box, moving to the product list component, and setting up the search component. Basic HTML elements (input field, button, and paragraph) are added to the search component. To style the HTML, CSS is applied, and the selector for the search component is used in the product list component to integrate the search box functionality.

10:03

💻 Property Binding for Prepopulating Search Text

This paragraph covers how to use property binding to prepopulate the input field with default text ('Men's VI'). The search text property is defined in the component class, and its value is bound to the input element using property binding. The same search text is displayed in a paragraph element to reflect the search result dynamically. The example demonstrates how changing the value in the component class updates the view template automatically.

15:05

⌨️ Event Binding to Update the Component Class

Here, event binding is introduced to update the search text in the component class when a user types in the input field. An `input` event is bound to a method (`updateSearchText`) that captures the user's input and assigns it to the search text property. The target property of the event object is used to access the value from the input element. This dynamic binding allows the view template to update the component class in real-time as the user interacts with the search box.

🔄 Simplifying Two-Way Data Binding with NG Model

The paragraph explains how to simplify two-way data binding using Angular's built-in `ngModel` directive, which combines property binding and event binding. Instead of manually implementing both types of binding, `ngModel` can be used to achieve the same result with less code. The `FormsModule` must be imported and registered in the app module to enable `ngModel`. With this, the input field is bound to the search text property, allowing seamless data updates between the view and component.

✅ Finalizing Two-Way Data Binding

This concluding section reinforces the concept of two-way data binding. The search text is dynamically updated in both the input field and the component class. As the user types, changes in the input field reflect in the search text property and vice versa. This two-way data binding ensures synchronization between the component and view, completing the explanation of how two-way binding works in Angular.

Keywords

💡Data Binding

Data binding refers to the process of connecting the component class's properties with the view template in an Angular application. In the video, the instructor explains different types of data binding, including one-way and two-way, and how they allow for interaction between the UI and the underlying logic.

💡One-Way Data Binding

One-way data binding allows data to flow in a single direction, either from the component class to the view template (using property binding and string interpolation) or from the view template to the component class (using event binding). The video explains that this technique is useful when you want data to either be displayed or updated without needing immediate feedback between the UI and the logic.

💡Two-Way Data Binding

Two-way data binding is a method in Angular that allows data to be synchronized between the component class and the view template. In the video, the instructor discusses how two-way data binding combines property and event binding, enabling changes in the UI to reflect in the component class and vice versa, providing a consistent and interactive user experience.

💡Property Binding

Property binding is used to pass data from the component class to the view template by binding properties in the HTML to the component’s values. This concept is discussed in the video to prepopulate an input element with a value from the component, showing how to dynamically control UI elements based on data.

💡Event Binding

Event binding allows the view template to communicate user actions (such as clicks or keystrokes) to the component class. The instructor uses an example of capturing user input in a text box and updating a property in the component class, showcasing how event binding helps create interactive elements.

💡ngModel

ngModel is an Angular directive used to achieve two-way data binding in a more efficient way. In the video, ngModel is introduced as a built-in directive that allows combining property binding and event binding in a simple syntax, helping developers keep form inputs synchronized with their component properties.

💡Component Class

A component class in Angular is responsible for defining the data and methods that interact with the view template. In the video, the instructor explains how component classes store properties like 'searchText' and define methods that manipulate the UI, which illustrates how they are essential for managing application state.

💡View Template

The view template in Angular is the HTML code that defines how the UI should look. It interacts with the component class to display data and listen to user actions. The video discusses how data from the component class is rendered on the view template using binding techniques, thus emphasizing the role of view templates in visual presentation.

💡FormsModule

FormsModule is an Angular module that provides directives like ngModel, which facilitate the creation of forms and two-way data binding. In the video, the instructor imports FormsModule to use ngModel for managing the input form's data binding, demonstrating how the module simplifies form-related development in Angular applications.

💡Search Functionality

Search functionality refers to the capability of filtering or finding products based on user input in an e-commerce application. The instructor in the video demonstrates how to create a search box using two-way data binding and ngModel, making it possible to instantly reflect user input within the component and show related products in the UI.

Highlights

Introduction to one-way data binding, where data flows in one direction: either from the component class to the view template or vice versa.

Explanation of string interpolation and property binding for binding data from the component class to the view template.

Discussion on event binding, which allows data to be passed from the view template to the component class, demonstrated through a search text box.

Introduction to two-way data binding, enabling data to flow from the component class to the view template and back, keeping both in sync.

Illustration of how property binding and event binding can be combined to achieve two-way data binding.

Practical example of implementing a search functionality for an e-commerce application, including creating a search component.

Explanation of how to bind a text input field in a search box using property binding to pre-populate the input with data from the component class.

Demonstration of binding user input events to the component class using event binding to capture and update search text dynamically.

Addressing how to resolve errors when binding event objects and dealing with potential null values during event handling.

Introduction of Angular's NG model directive, which simplifies two-way data binding without needing explicit property and event bindings.

Explanation of importing and registering Angular FormsModule to use NG model in a component.

Detailed step-by-step guide to incorporating NG model for the search input to allow seamless two-way data binding between the input element and component property.

Highlighting the significance of the two-way data binding feature in keeping the view and component synchronized in real-time.

Explanation of how two-way data binding enhances user experience by allowing dynamic interaction between UI elements and underlying data.

Final summary emphasizing that two-way data binding involves continuous synchronization between the view and the component class, making it easier to manage dynamic data in Angular applications.

Transcripts

so in the last few lectures we learned

about data binding from component class

to view template and from view template

to component class and this is called as

oneway data binding because there we are

only binding data in One Direction

either from component class to view

template or from view template to

component class so in one way data

binding either we can bind data from

component class to view template we can

achieve it using string interpolation

and property binding and we have already

talked about that then we can also bind

data from view template to component

class using event binding and we talked

about event binding in our last lecture

now we are going to talk about two-way

data binding in two-way data binding we

can bind data from component class to

view template and at the same time the

data will be binded from view template

to component class that means whenever

we change a property in the component

class the changed value will reflect in

the view and in the view whenever we

change the value that change value will

be assigned to the property of the

component class let's try to understand

two-way data binding with an example and

how we can achieve

it but before that let me go ahead and

let me remove everything from here what

I will do is I will simply comment all

the stml content from here I'll simply

keep it for your reference and from this

lecture we are going to implement our

actual e-commerce application and the

first thing which we are going to do is

we are going to implement the search

functionality and and for that we need

to implement a search textt box and for

the search box let's go ahead and let's

create a new component so I'll go ahead

and I will open a new terminal and in

here we want to create a new component

inside this product list component so

first we need to move to that product

list component for that let's use CD

command so from The Source folder we

want to go to app folder and in the app

folder we have product list folder let's

press enter and now we are in the

product list folder

let me go ahead and let me clear the

terminal first and now let's type the NG

generate command and here we want to

generate a new component and I'm going

to call this component

search let's press

enter and now a search component should

be created inside this product list

component so if I expand this product

list component there we have this search

folder in there we have our search

component now from this component again

I will go ahead and I will delete this

spec. TS file

okay so here we have our search

component class decorated with at

component decorator the selector there

is app search so I'll keep it like that

and the template URL here is search

component. HTML so let's go to that view

template and in here we have a paragraph

element but we don't need this paragraph

element here instead we want to write

some HTML in order to display a text box

and a button for that in order to save

some time I have already returned some

HTML so I'll copy that HTML from here

let's go back to vs code and let's paste

it

there we don't need these two divs for

now so let's remove it so in this HTML

we have this div inside that div we have

an input element and we also have a

button element then we have another div

and inside this div we are simply

displaying a

paragraph okay so this is a very simple

HTML here now to design this HTML I have

also written some CSS so let's go ahead

and let's grab that CSS let's grab that

CSS from here and let's go to VSS code

and let's go to the stylesheet of the

search component which is this search

component. CSS and let's paste it

there and now let's go to search

component.ts and let's use this selector

in our product list component so here we

have this product list component. HTML

in there we have commented everything so

the first thing which we want there is

the search text box for that we can use

the select of the search component with

this if we go to the web

page it will look something like this so

here we have our input element and the

button and here we have our

paragraph okay now don't worry about

this paragraph for now I will explain

you why we have this paragraph here and

now with the help of this text box let's

go ahead and let's learn about two-way

data binding two-way data binding is

basically a combination of property

binding and event binding so we have

learned that using property binding we

can bind data from the component class

to view template and using event binding

we can bind data from view template to

component class so this two-way data

binding is simply a combination of

property binding and event binding let's

see how we can achieve two-way data

binding by combining property binding

and event

binding so here let me go ahead and let

me close this product list component.

HTML let's also close this product list

component.ts then

let's close this search component. CSS

we don't need it anymore and we need to

work with search component. HTML which

is the view template and search

component.ts there we have the search

component class so here what we are

going to do is we are going to create a

property called search text it is going

to be of type string and for now let's

say search text is maybe men's VI so

here what we want is we have this search

text and in the view we have this search

text box this input element so we want

to prepopulate this input element with

the search text which we have assigned

to this sech text property in this case

we want to pre-populate this input

element with this value men's V for that

we can use oneway data binding where we

want to pass data from component class

to view template and we have learned for

that we can use property binding right

so here in the search component. HTML on

this input element we are going to bind

the value property for that we need to

wrap it within square brackets like this

and to that we can assign any typescript

expression Within These double codes

here we simply want to assign this

search text

property to this value property and with

this if we save the changes and if you

go to the web

page there you will notice that this

text box is prepopulated with that value

man's spere

and here also search result for there

also we want to show that same value the

search text value So currently we are

hardcoding it as you can see we are

hardcoding it here but instead of

hardcoding it let's go ahead and let's

use our search text

property okay if you save the changes

again and if you go back to the web

page now you can see that value has been

rendered if I go ahead and if I change

this value to something else maybe

women's watch

and if you go back to the web page now

that value should be rendered in the

text box as well as here so whatever we

are going to search using this search

text box that should be displayed here

and also in the text box so this is

oneway data binding where we are passing

data we are binding data from the

component class to view template now

what we also want is whenever the user

types something inside this search box

for example man's shoe this value should

be assigned back to this search text

property okay and for that we have

learned that we can use event binding so

here when we will input something inside

this text box an input event will happen

we are going to bind that input event to

this search text property so here let's

go to search component. HTML and on this

input element let's also bind input

event okay and in order to bind an event

we need to wrap it within parenthesis

like

this to this let's assign a function

let's call it maybe update search

text okay and in the last lecture we

learned that whenever an event occurs it

emits an event object and that event

object is available inside the dollar

event

variable right so whenever this input

event will happen on this input element

it is going to emit an event object in

this case it is going to emit input

event object so that will be assigned to

this dollar event variable and we are

passing that event to this update search

text method now here we have this error

because we need to create this

method so let's go ahead and let's

create that method here

here okay and it is also going to take a

parameter and here we also need to

specify the type of this event the type

of the event which is going to be

emitted for now let's set it to any but

in the last lecture we learned that

whenever the input event happens it

raises an event of type input event

right so here we can also specify that

type which is input event and in the

last lecture we also saw that on this

input event we will have a Target

property which basically stores the

Target on which the event has happened

in this case the event will occur on

this input element so this target

property is going to store the Dome

object of that input element and on that

we can access its value so this value it

is going to store the value which the

user has entered inside the text box

inside the input element and now we want

to assign that value to this search text

property so here we can say this do

search text equals whatever value the

user has entered inside this input

element now here we have this error

which says event. Target is possibly

null to fix this problem for now let's

simply set the type as

any okay we will talk about this error

letter in this course but for now here

we want to understand two-way data

binding so for now let's simply set the

type of this event to any and in that

case that error is gone all right so in

this way we are binding the value which

the user is typing in the text box to

this search text so whenever the value

in the text box will change that new

value will be assigned to this search

text here so if I save the changes if we

go back to the web

page initial value is women's watch

that's because that's what we have set

the initial value for the search text

now when we start typing something

inside this text box let's say men's

shoes you see that value is being

rendered here that means that value is

being assigned to the search text

property and that is being rendered here

so in this way by combining property

binding and event binding we can achieve

two-way data binding and that's why I

said that two-way data binding is

basically the combination of property

binding and event

binding now we can achieve this two-way

data binding in a more simpler way

so instead of using property binding and

event binding like this we have another

way and that is by using a built-in

directive called NG model so again when

we use NG model that time also since we

have learned that two-way data binding

is a combination of property binding and

event binding what we do in property

binding in property binding we use a set

of square brackets and in there we

specify the property name and in event

binding we use a a set of parenthesis

and in there we specify the event name

so this is the syntax which we need to

use and inside this parenthesis so first

we have a set of square brackets inside

that we have a set of parenthesis and in

there we need to use a directive called

NG

model okay and to this we can go ahead

and we can assign the property which we

want to bind in this case we want to

bind search text property now here you

will see that we have an error and if I

H this error it says can't bind to NG

model since it isn't a known property of

input now to resolve this problem all we

have to do is let's first save the

changes here and all we have to do is we

have to go to app module. TS file there

we need to import NG model so for that

we can say import

NG model and we want to import it from

angular /

forms okay we need to import NG model

from angular / forms and now we need to

register it now since it is a third

party Library we are going to use this

NG model we are not creating it right it

is a third party Library so since it is

a third party Library we are not going

to specify it inside this declarations

array we are going to specify it inside

this Imports array so there let's go

ahead and let's register this NG model

and here we have an error and if I over

over this error it says the directive NG

model appears in import but it's not

Standalone and cannot be imported

directly that's because here instead of

importing NG model we need to import

form

module and again we need to import form

module from angular / forms and we need

to register this forms

module inside this

Imports okay and with this all the

errors ion okay so in order to use this

NG

model we need to import forms module

from angular / forms and then we need to

register it in the Imports array because

it is a third party Library we are using

so it should be registered within import

Sur when we are creating a component or

a directive of our own that we declare

inside the Declarations array keep this

point in mind all right with this let's

save the changes let's close this

module. TS let's go to search component.

HTML and here also the error is gone and

in this way using this NG model we can

achieve two-way data minding so if you

go to the web

page here you see initially the value

stored in the search text is women's

watch so that has been rendered here now

as soon as I start typing something here

for example iPhone you will see that is

being rendered here and also here so

whatever value we are typing here that

is getting assigned to the search text

and then that value is being rendered

here and this is what two-way data

binding is in two-way data binding The

Binding happens in both the directions

the data is binded from component class

to the view template and at the same

time from The View template to the

component class here this search text

property it is binded with this input

element so whenever the value of the

search text property will change that

will reflect in this input element and

whenever the value inside this input

element will change that will reflect in

this search text property this is what

two-way data binding is so this is all

from this lecture if you have any

questions then feel free to ask it thank

you for listening and have a great day