Angular 2 container and nested components Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 20 of angular2 tutorial in
this video and in the next few videos
we'll discuss what is the nested
component what's a container complement
passing data from the nested component
to contain a component and vice versa
along the way we'll also discuss
component input and output properties
creating custom events using event
emitter class and finally what is ng
container directive and it's used to
understand all these concepts we're
going to make use of this example right
here notice we have a table that
displays the list of employees and just
about this table we have three radio
buttons and every radio button has a
number next to it that number is the
total number of employees in that
category so next to already button we
have number five so we have five total
employees that is both male and female
employees we have three mill employees
and two female employees at the moment
notice all radio button is selected so
we see both the male and female
employees in the table right here now if
I select male radio button then only the
three male employees should be displayed
along the same lines if we select female
radio button then only the two female
employees should be displayed in this
table I've already developed this
example and it is right here so notice
at the moment already button is selected
so we see all the employees when I
select male we see only the three male
employees and if I select female we only
see the two female employees so let's
see how to implement this example and
while we are doing that we'll understand
all these concepts so first let's
understand what is a container and
nested component in this example we've
got two components one of the contents
displays the list of employees in the
table and we have already implemented
this in our previous videos in this
series we call this component Employee
List component just about this Employee
List component we have another component
here which displays the three radio
buttons and the total number of
employees in each category we're going
to call this component employee count
Continent we have not yet implemented
this component we are going to do that
in this video and then once we have
developed this employee count component
we are going to nest it inside this
Employee List component so this
component becomes the nested component
or chained component and the component
which contains the nested component
becomes the Container component or
parent component this is the same
example that we have been working with
so far in this video series at the
moment within our Employee List
component we have this refresh employees
button to keep this example simple let's
delete this button so from the HTML
markup let's remove the HTML which
displays a button and within the
typescript file this is a method that
gets called when we click that refresh
employees button and within this method
we have five employee objects whereas
within the constructor we only have four
employee objects so let's copy this
fifth employee into the constructor and
then let's get rid of the skit employees
method let's also get rid of this track
by employee code method and then within
the HTML markup let's also remove this
track by save our changes and reload the
page notice the button is gone and we
have five employees now let's create our
employee count component which displays
these three radio buttons so let's right
click on the employee folder ad and we
want to add a new type script file
let's name or file employee count dot
component es let's click OK
bye now creating a component should be
very familiar to you the first step is
to create a component class they have
named our component class employee count
component and within this class we have
three properties all male and female we
have these properties to display the
count of employees we have within each
category at the moment we have
hard-coded the values for these
properties within our employee
found component what we want to be able
to do is pass the values for these green
properties from our Employee List
component because this Employee List
component has the list of employees so
only this component will be able to tell
us the total number male and female
employees so we'll discuss how to do
that in our next video for now let's
keep the values for these three
properties hard-coded within our
employee count component so that's our
first step to create a component create
the class and to make this class an
angular component we need to decorate it
with component decorator notice we have
set select a property - employee - count
we can use the selector as a directive
where we want to use this component we
also have set template URL and style
URLs properties at the moment we don't
have this HTML and CSS files we'll
create them in just a bit at the moment
we have a red squiggly here and that's
because we are missing the import for
component from angular core next let's
add this timesheet employee count
component dot CSS so let's right click
on our employee folder add and we want
to add a new style sheet and let's name
it employee count dot component dot CSS
within this style sheet let's include a
CSS class we are going to use the CSS
class to style these three radio buttons
and this CSS class is very
straightforward they are selling three
properties color font family and font
size next let's create a view template
for our employee count component so
let's right click on employee folder ad
and we want to add an HTML page and
let's name our view template employee
count component dot HTML within the view
template let's include the required HTML
to display these three radio buttons and
this little text show so to display the
little text show I'm going to use a span
element and set its class
- radio class which we have just created
within this CSS file and the
X within the span element is sure next
we want our first radio button that
displays all and then the total number
of employees so to get that radio button
let's use an input element let's set the
type to radio and I'm also going to set
name two options
we're going to use same name for all the
three radio buttons so they behave as
one group and the selections will be
mutually exclusive so this HTML right
here is just going to give us this radio
button next to the radio button we want
this text as well all and within
brackets the total number of employees
to get that I'm going to use another
span element next to this radio button
and let's set the class of the span
element to radio class and then we are
going to use interpolation to display
the text that we have so first we want
this text all and then an Open bracket
so I'm going to hard code that here all
open bracket and then to that we want to
append the total number of employees and
we're going to get the total number of
employees from this property all so
let's bind to that property all and then
we want to close the bracket so this is
going to display these two lines are
going to display the radio button and
the text next to the radio button the d
total count of employees and we need to
do the same thing for the rest of the
two radio buttons that we have here so
let's include the mark-up for those two
radio buttons as well so here we have
the radio button for male and here we
have the radio button for female notice
we are binding to male and female
properties that we have within our type
script file so at this point we have our
employee count continent created next we
need to nest of our employee count
continent within our employee list
component so for that we are going to
use the selector as a directive so
within our employee list component let's
open the view template of our employee
list component and just about this HTML
table I'm going to use this selector
employee - count as a directive
then let's include two HTML break
elements finally we need to import and
declare our employee count continent
that we have just created in the module
where we need it but in our application
at the moment we only have one module
that's our root module which is an
applet module or TSO let's open the file
and within this file
first let's import our employee count
component and within the declarations
array let's include our employee count
component let's save all our changes and
reload our webpage notice now we see all
the three radio buttons along with the
list of employees as expected at the
moment and we click these radio buttons
nothing happens and also the values that
we have against each of these radio
buttons they are hard-coded within our
employee count component now in our next
video we'll discuss how to pass the
values for these three properties all
male and female from our Employee List
component which is opened in a component
to this nested component employee count
component on the next slide we have the
typescript code of our Employee List
component on this slide we have the
style sheet and on the slide we have the
view template of our Employee List
component on this slide we have the
typescript view template and style
sheets of our employee count component
to nest a component use the selector of
the component that you want to nest as a
directive on the Container continent
notice here we are using the selector of
our nested component employee count
component as a directive within the
container component that is employee
list continent
remember to import and declare the
nested continent in the module where you
want to use it we want to use employee
count component within our route module
so we are importing and declaring it
before we can use it thank you for
and have a great day