Angular2 Event Binding Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 14 of angular tutorial in
this video we'll discuss even binding in
angular with examples these bindings
that we have discussed so far flow data
in one direction that is from a
component class property to an HTML
element property how about flowing data
in the opposite direction when we have a
pair form we will have a variety of
controls on that platform for example
we'll have a textbox drop-down list
button images etc when you use a visitor
platform like that he will perform a
variety of actions like selecting from a
drop-down list typing into a textbox
clicking on a button or as simple as
hovering over image elements when user
performs these actions their
corresponding events are raised and when
these events happen we want to be
notified about them within our component
so we can react to those events that's
when we use event binding so in short we
can say even binding flows data in the
opposite direction that is from an HTML
element to a component this is the same
project that we have been working with
so far in this video series now let's
look at a simple example of binding to
click event of a button element so
within the inline view template here
let's include a button element and then
within a pair of parentheses we specify
our target event to which we want to
bind in our case we want to bind to the
tricky event of the button so we specify
that event within a pair of parentheses
like this remember that property binding
we use a pair of square brackets and
with event binding we use a pair of
parentheses and then we specify the
equal to symbol and then the name of the
method to be notified when this event is
raised in our case we want this method
on click to be notified when this event
is raised we don't have this method yet
we'll create that in just a bit
now let's include this text on the
button click me and finally close the
button so the name of the function that
will be notified when this event is
raised is on click and we define that
method
then our continent class and write code
to react to that event so with another
component class let's include this
method on clique this method is not
going to return anything so let's
specify the return type as wild and all
we want this method to do is log this
message to the console button plate so
with all these changes let's run our
project by pressing ctrl f5 launch
browser developer tools and click the
console tab and look at this when we
click the button notice the message
button click this log to the console so
every time we click the button the
message is logged and the counter value
goes up and here is the syntax for even
binding we also have an alternative
syntax for even binding instead of
including the events name in a pair of
parenthesis like this we can also use on
- even name variation so in this case
one - clegg and this is the method to be
notified and this event is raised let's
save all changes and reload this webpage
one more time by pressing ctrl f5 and
when we click the button it works
exactly the same way as before
so this alternative style of event
binding is called canonical form now
let's look at a slightly complex example
of even binding so here is what we want
to do when the webpage initially loads
we only want to show first name and last
name of an employee and then we also
want to have this button show details
when we click this show details button
we also want to display their gender and
age and the text on the button should
change to hide details and when we click
this high details button we want to hide
gender and age in short the web page
should revert to this state and the text
on the button also should change to show
details so let's see how to implement
this but even binding we are going to
make use of the employee competent that
we implemented in one of our previous
videos in this series and here is that
employee component within the employee
component class I'm going to introduce a
property I'm going to
Colet show details this is going to be
of type boolean and let's set it to a
default value of false remember when the
webpage initially loads we don't want to
show there additional details like
gender and age so that's the reason we
are setting it to a default value of
false
I'm also going to include a method here
I'm going to call it toggle details and
this method is not going to return
anything so I'm going to set the return
type to Wired and all this method is
going to do is toggle the value that we
have within this show details property
so this dot show details equals
exclamation they start show details so
if this property has a value of true
this method will change it to false if
it has false it will change it to true
and within the route component let's
include this selector my employee as a
directive so instead of the button we
are going to use my employee here so
with all these changes in place let's
reload our page notice at the moment we
don't have show details button so let's
include that now within the view
template of our employee component just
after this table let's include a break
element and then a button element the
text on the button is going to say show
details and we want to bind to the click
event of this button so within a pair of
parentheses we specify the name of our
target event which is click in this case
and then equal to sign and then the name
of the method to be notified when this
click leave in this race remember we
want this method to be notified toggle
details so we specify that method right
here let's save our changes and freeload
of web page notice at the moment when we
click the show details button nothing
happens that's because when we click the
button we call this method toggle
details and all this method does is
toggle the value we have in this show
details property
now to dynamically show and hide these
two TR elements gender and age we are
going to make use of a built-in
structural directive provided by angular
and that directive is ng F so on the
gender and age TR elements I'm going to
use this ng F structural director notice
the star in front of ng F indicates that
it's a structural director and we are
binding it to show details property so
this n GF director is going to
dynamically add or remove these TR
elements depending on the value that we
have in this show details property if we
have a value of true in this show
details property then this TR element is
added to the Dom if we have a value of
false then it is removed from the Dom we
have other structural directives as well
provided by angular we'll discuss all
those structural directives in detail in
our upcoming videos so with all these
changes in place let's reload of web
page notice on the initial page load
gender and age rows are hidden that's
because if you recollect we have set
show details default value to false and
we have binded ng-if directive to that
property since it's probably has a
default value of false
this ng F is going to remove these two
TR elements from the Dom and that's the
reason we don't see those two rows on
the initial page load when we click the
button the rows Atiyah that's because
when this button is clicked we are
calling this method toggle details which
toggles the value that we have in this
property show details the default value
was false so when we click the button
the first time it changes that value to
true and when the value is true this ng
F is going to add those two TR elements
back to the DOM and that's the reason we
see those two rows again when we click
the button again the screws are removed
and we click it again those are added
back
so the only problem at the moment is the
text on this button all the time it says
show details depending on that these
roles are displayed or not we want to
change the text on the button
dynamically so to do that we are going
to use ternary operator so if this
property show details is true then we
want to display the string hide else
show and then to that we want to append
details so let's save our changes and
reload of web page notice now it works
as expected when the rows are hidden it
says show details when the rows are
displayed it says high details and here
is the code which we just discussed
thank you for listening and have a great
day