#18 Two way Data Binding | Angular Components & Directives | A Complete Angular Course
Summary
TLDRThis 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
📘 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.
🔍 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.
💻 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.
⌨️ 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.
Mindmap
Keywords
💡Data Binding
💡One-Way Data Binding
💡Two-Way Data Binding
💡Property Binding
💡Event Binding
💡ngModel
💡Component Class
💡View Template
💡FormsModule
💡Search Functionality
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
関連動画をさらに表示
#14 What is Data Binding | Angular Components & Directives | A Complete Angular Course
#17 Event Binding | Angular Components & Directives | A Complete Angular Course
#15 String Interpolation | Angular Components & Directives | A Complete Angular Course
#16 Property Binding | Angular Components & Directives | A Complete Angular Course
More updates from Angular v18
#07 What is a Component | Angular Components & Directives| A Complete Angular Course
5.0 / 5 (0 votes)