Angular component output properties Video Lecture | Angular 2 tutorial - Front-End Programming

this is part when t2 of Angela - to do
here in this video we'll discuss how to
pass user actions or user entered values
or selections from the trailed component
to the parent component using output
properties along the way we'll also
discuss creating custom events using
angular event emitter class and finally
what is NG container directive and its
use so here is what we want to be able
to do at the moment we have the correct
count of employees displayed next to
each of these radio buttons we discussed
how to achieve this using input
properties in our previous video when we
select any of these radio buttons at the
moment nothing happens what we want to
be able to do is depending on the radio
button selection we want to display the
correct set of employees in this table
for example if we have the male radio
button selected then we want to display
t for male employees in this table and
if we have female selected then only
displayed it to female employees in this
table if we have the all radio button
selected then we want to display all the
six employees both male and female
employees in this table so to achieve
this we are going to make use of output
properties so we have these radio
buttons within this employee count
component which is our child component
and the table is present within the
parent component which is Employee List
component so whenever we make these
selections within the child component we
want to pass that user action from the
child component to the parent component
that is our Employee List component
using output properties this is the same
project that we started in part 20 of
this video series first let's look at
the change required in our child
component which is employee count
component whenever a user selects a
radio button we want to raise a custom
event from our child component which is
our employee count component so the
parent component can be notified about
that event and the parent component can
decide which employees to display in the
table to raise the custom event from our
child component we are going to make use
of output property to be able to use out
property we will have to first import it
from angular core just like how we have
imported input property
so first let's import output from
angular core to create a custom event we
are going to make use of event emitter
class so let's also import even emitter
class from angular core before we create
our custom event first let's create a
property within the employee account
component class I'm going to call this
property selected radio button value so
this property is going to keep track of
the value of the radio button that we
have selected all male or female
so the datatype of this property is
going to be string and I'm going to
initialize it to a default value of all
next let's create our custom event I'm
going to call our custom event count
radio button selection change and to
turn this to an event I'm going to
decorate it the ad output decorator
which we have imported from angular core
right here and create our custom event
we are going to make use of this event
emitter class which again be imported
from angular core so whenever this
custom event is phrased what we intend
to do is we want to pass the selected
radio button value that is all male or
female which is a string as the even
data so we want to create a custom event
whose even data is of type string this
even data is commonly called as event
payload so the event payload for our
custom event count really what an
selection change the event is string
so even Tomita off string equals new
event emitter off string so basically
this is our custom event count radio
button selection changed finally let's
create a method which is going to raise
this custom event so after all our
properties let's create a function I'm
going to call this function on
radio button selection change and all
this function is going to do is raise of
a custom element so this dot what so a
custom event count radio button
selection changed and we are going to
use the Emmet method to raise the event
and remember what is our event payload
it is of type string the selected radio
button value and here we have a property
which is going to keep track of the
selected radio button value so let's
pass that as the event payload so to the
image method we are going to pass this
property selected radio button value so
this line right here is going to raise
our custom event now let's quickly recap
the changes that we have done within the
tailed component class so far first we
have imported output and event emitter
from angular Co and then we have created
a property which is going to keep track
of this selected radio button value and
then created a custom event using output
property and even Tomita class and then
created a method which is going to raise
our custom event passing it the selected
radio button value as the event payload
next let's look at the changes required
within the butan plate of our employee
count component so let's open employee
count coms in dot html' here we have the
three radio buttons the first radio
button displays all so let's set the
value attribute of this radio button to
all for this video button will set it to
Mia and for the third one female we'll
do that in just a bit but before that
let's also use two-way data-binding
to use two-way data-binding we draw
banana in a box and then use ng model
directive and we want to bind to this
property with no component class
selected radio button value remember
this is the property which keeps track
of the selected radio button value and
we are passing that property which
contains the selected radio button value
as the even payload to a custom event
which is count radio button selection
change so let's buy
to this property so with this two-way
data-binding in place any time the
selection changes this property selected
radio button value is automatically
updated with that new selected in your
button value and that is being passed as
the even payload for our custom event
and finally let's also bind to the
change event so let's use even binding
the event of the radio button is changed
so anytime the selection of the radio
button changes we want to call our
custom method that we have written here
so this method raises the custom event
passing it the event payload so we want
to call this method when the change
event of the radio button is raised so
that's going to raise our custom event
now let's do the same thing for the rest
of the two buttons first for the mail
radio button and then for our female
radio button and within our employee
count component class I'm also going to
make one more change so after we raise
of a custom event
I'm just going to log to the console the
selected radio button value so to this
method let's pass this dot select the
radio button value so we can quickly
test the changes that we have made so
far so let's save all these changes now
before we reload this webpage notice the
radio button selected we have female
radio button selected when we reload the
webpage it's going to default to all
that's because with another component
class we have set the default value for
this property to all and we are using
two-way data-binding
but this property since we have a
default value of all and since we are
using two-way data-binding
when we reload this webpage it's going
to default to all so let's reload this
webpage notice it defaults to all and
now let's launch our developer tools by
pressing f12 and we are on the console
tab at the moment notice whenever this
selection changes now when I select male
notice to the console we are login mail
similarly when I said female we have
that selected radio button value past
okay so of a custom event within our
child component is working as expected
so all that is left right now is to pass
the selected radio button value to the
parent component and the parent
component can then decide what employees
to display in this table so let's see
how to achieve that before we look at
the changes required in the parent
component let's quickly recap the
changes we have made within the view
template of our employee count component
we have said value attribute of all the
three radio buttons we have used to a
data binding and bound to the change
event of each of the radio buttons now
let's look at the changes required
within the typescript file of our parent
component which is Employee List
component so within this class I'm going
to introduce a property I'm going to
call it selected employee count radio
button and I'm going to set it a default
value of all so basically this property
but another Employee List component is
going to keep track of which radio
button is selected so we can decide
which employees to display by default
it's going to display all the employees
in the stable so we have said the
default value for this property to all
next let's create a method that will be
called when the custom event within our
change component is raised so when the
custom event within the change competent
is raised it's going to pass the
selected radio button value as the even
data which will be received by the
method that you are going to create here
so I'm going to call this method on
employee count radio button change so
when that is changed remember the even
data is string so I'm going to create a
parameter here selected radio button
value and the type for this is going to
be string and this method is not going
to return anything so let's set the
return type to void so
so we will receive into this even hand
the method they selected radio button
value and what are we going to do with
that value we will update this property
which is keeping track which radio
button is selected so this dot selected
employee count radio button equals
selected radio button value so on the
next slide we have the two changes which
we have just made in the component class
of our Employee List component finally
let's look at the changes required
within the view template of our Employee
List component so let's open employee
list dot component dot HTML and what we
want to be able to do is bind to the
custom event that we are raising within
our child component the custom event is
count radio button selection change and
notice within the view template of our
employee list component that's our
parent component we're using the change
component selector as a directive so
here we are going to bind to the custom
event raised by the child component so
for event binding we use pair of
parentheses within paranthesis we
specify the name of our custom event and
then we are going to specify the name of
the method as the event handler now
within our Employee List component
Clause have created this method right
here which we want as the even handler
method so let's specify this method
right here and we know this method is
going to receive this selected radio
button value as the event payload and
for this method to be able to do that we
will pass the dollar event object so
this object is automatically going to
receive the selected radio button value
and what is this method going to do with
that value
it simply updates this property and we
are going to use this property to
determine which employees to display in
the table we are going to use ng F to
decide which employees to display so
within the view template on this TR
element right here where we are using
the structural directive ng 4 we are
also going to use ng F so star ng F
equals and remem
we will use this property selected
employee count radio button so if the
selected employee count radio button
value is all then we want to display all
employees you know this is going to
return true if it returns true it will
have that respect to TR to the table or
we want to check the employee gender
notice we are getting employee object
into this variable so as we are looping
through each employee object we want to
compare the employee object gender value
so we have the employee object let's
compare the gender property value so if
the selected radio button value which is
male/female or all as it's male for
example and if the employee object that
we are iterating over if the general of
that employee is also male then this is
going to return true if it returns true
then that respect to TR will be added to
the T body of the table which means we
will be able to see that employee now
using to structural directives on a same
element is not allowed in angular let's
see what's going to happen if we do this
let's say all our changes and reload of
our page notice that it happens beyond
this message
now let's launch our developer tools and
investigate what's going on let's look
at a message we have right here notice
it says can't have multiple template
bindings on one element is only one
attribute named template or prefix to
its star so if you look at HTML we have
right here they're using to structural
directives on one element so with this
error message basically angular is
complaining that we can't use both ng
four and ng F on one element so to
overcome this issue let's make use of
the ng container directive just after
the team body element let's use the ng
container directive and then move the
closing tag after the closing TR element
and then let's move this ng for
structural directive on to the ng
container element so now we don't have
to
structural directives on one element so
let's save our changes and free load of
webpage notice now the employees are
displayed as expected and we have the
already button selected now when we
select male only the male employees
should be displayed but then we have all
the employees displayed still let's
investigate why the custom event of our
child component is not being handled as
expected now if we look at the event
here instead of specifying or a child
component custom events name which is
count radio button selection change they
are actually specifying the even handler
method name so the same method name is
specified here that's why the event is
not being handled
so let's specify our custom event within
our child component as the event target
and then this is the even handler method
so let's save our changes and reload
this webpage one more time and now as
the selection changes look at that the
respect to employees are displayed in
the table as expected so here we have
those two changes we made in the view
template of hope and continent which is
our employee list complaint thank you
for listening and have a great day