Two way data binding in angular 2 Video Lecture | Angular 2 tutorial - Front-End Programming

this is but 15 of angular2 too - yeah in
this video well this comes to be data
binding in Angela let's understand
two-way data-binding
with an example so here is what we want
to do whatever we type into this text
box we want to echo that value on the
webpage as you can see right here and we
want to achieve this as we had typing
into the text box at the moment we have
these characters type Tom Hopkins and
that's what is displayed on the web page
so let's see how to achieve this using
two-way data-binding in angular this is
the same project that we have been
working with so far in this video series
so within our app component class let's
include a property I'm going to call it
name the data type is string and let's
include a default value of Tom and then
within the view template let's include
this little text name and then input
element and we want to bind to the value
property of the input element using the
property binding so value equals within
course the name of the property that we
have in our component class in this case
the name of the property is name and
let's close the input element and then
let's include an HTML break and then
after that we want this little text you
entered and we want to display whatever
value the user has typed into this text
box so let's use interpolation for that
and within double curly braces we
specify our property name pages name so
with all these changes in place let's
run our application by pressing ctrl f5
at the moment we only have one way data
binding that is from our component class
property to HTML element properties
notice whatever value we have in this
name property at the moment we have Tom
that value is displayed both in the text
box and on the web page to display it
within the text box they using property
binding and to display it on the web
page they using interpolation but the
important point to keep in mind is we
only have one way data binding
convinent class property to HTML element
properties now as we type within this
text box notice the data is not flowing
in the opposite direction so what we
want to be able to do is as we type
within this text box we want that value
to be flown in the opposite direction
and then update this name property
within our component class so we want to
be effectively able to flow data from an
HTML element to the component class
property so we have to be data binding
so let's see how to achieve this let's
use event binding to flow data in the
opposite direction I'm going to make use
of the input event of our input element
notice the input event is within
paranthesis and then I'm going to have
this expression right here name equals
dollar event dot target dot value if the
score doesn't make sense at the moment
don't worry well discuss that in just a
bit so let's see what changes and then
let's reload off webpage by pressing
ctrl f5
now notice as we type into the text box
the updated value is reflected on the
browser now here we have two-way
data-binding so let's understand the
code that we have just written the
property binding right here flows data
in one direction that is from a
component class property to HTML element
property and this even binding right
here flows data in the opposite
direction that is from our HTML element
to component class property look at this
expression right here name property
within our component class equals dollar
event or target dot value so what is
this dollar event object this object is
exposed by angular data binding and
contains even data in this case it
contains the value that we have typed
into the textbox and to get that value
they using that dollar event object dot
target dot value and then that value is
then used to update name property within
our competent class so effectively you
know as we type into the textbox
whatever value we are typing into the
textbox we are using that value to
update the name property within our
component class and then this
interpolation expression right here is
binded to the name property so we see
the value that we have typed in the text
box so we can think of angular two-way
data-binding as a combination of
property binding and event binding and
here is that exact same code which we
just discussed to save a few keystrokes
and simplify angular to editor binding
angular has provided ng model directive
with ng model directive we can rewrite
this line of code right here like this
notice we are effectively replacing this
property binding and event binding using
ng model directory like this let's look
at this in action now I'm going to
replace both this property binding and
even binding with ng model equals name
and then I'm going to wrap this ng model
within a pair of parentheses indicating
that we
even binding and then on the outside I'm
going to have pair of square brackets
indicating we also want property binding
let's see if these changes and then
reload of web page by pressing ctrl f5
notice it doesn't do anything beyond
displaying this message loading app
component content here let's launch the
browser developer tools by pressing f12
and notice we have an error and look at
what the error sees template parse error
can't bind to ng model since it is not a
known property of input so basically
angular is complaining that it can't
find this directive ng model this is
because ng model directory is present in
a different system angular module called
forms module for us to be able to use
this ng model directive we will have to
first import that forms module and we do
that within our module which is present
an app that module dot es so just like
how we have imported ng module and
browser module we will also have to
import forms module so let's make a copy
of this line the module that we want to
import is forms module and the forms
module is present in angular forms and
just like how we have included this
browser module but in the inputs array
of this ng model directive will also
have to include forms module so let's
specify that right here let's save our
changes and reload of web page notice
now it works as expected don't forget to
import ng model directive from angle
assist module forms module otherwise you
would get an error and here we have the
syntax for two-way data-binding remember
two-way data-binding in angular is a
combination of both property binding and
even binding the square brackets on the
outside of a property binding and the
parentheses on the inside are for event
binding to easily remember the syntax
compared it to a banana in a box the
parentheses on the inside half of the
banana
and the square brackets on the outside
are for the box thank you for listening
and have a great day