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

this is part 6 of angular2 tutorial in
this video we'll discuss nesting angular
components that is including a component
inside another component we already know
angular 2 is all about components a
component in angular allows us to create
a reusable UI widget a component can be
used by any other component so let's
look at a very simple example of nesting
components it is what we want to do we
want to display an employee details on a
web page as you can see right here it
has got two sections the first one is
the page header which is employee
details and the second one is the
employee details table
we want to design our web page like this
this page header employee details is
going to come from our fruit component
which is app component and this employee
details table is going to come from
employee component at the moment we
already have our root component we need
to do minor modifications to it which
we'll do in chest Abed first let's go
ahead and implement employee component
so let's slip to Visual Studio now our
employee component is going to be inside
its own folder so let's right-click on
the app folder and add a new folder
let's name this folder employee first
let's add a view template for our
employee component so let's right click
on employee folder ad and we want to add
an HTML page and let's name this page
employee dot component dot HTML and
click OK remember we want to display
these details of the employee first-name
lastname gender and age so within the
view template of the employee component
let's include an HTML table which
displays those details notice within
every TR we have got two TD elements
within the first TD we have the field
names first-name lastname etc and in the
second TD Lescaut data-binding
expressions again first-name lastname
gender etc at the moment we don't have
these properties implemented yet we'll
do that in just a bit
they have got four TR elements
because we want to display employee
details in four rows in a table as you
can see right here so next let's
implement the employee continent code
file which supports this view template
so to this employee folder which
contains our butan plate let's add a
type script file let's name this
employee dot component dot PS and within
this file let's create our employee
component class now we want to be able
to use this employee component from our
route component so I'm going to use
export keyword on this class which
allows other components to import and
use this component if required and but
in this class we need to have these
properties that we are referencing in
the corresponding butan plate notice
here we have first-name lastname gender
and age so let's include these
properties within our employee component
class first name property type is string
and let's include a default value of Tom
similarly let's include properties for
last name gender and age we also have
the default value specified here at the
moment we are hard-coding the values in
the later video we'll discuss how to
retrieve these values from database
table the next step is to decorate this
employee component class with the
component decorator provided by angular
to add metadata but for us to be able to
do that we will have to first import the
competent decorator so let's import
component from angular core so let's use
the component decorator using the @
symbol and let's specify the selector
first I'm going to set selector to my -
employee you can give it any name you
want now remember we can use the
selector as a directive where we want to
use this component and then let's
specify template URL
now this component has the view template
in a separate HTML that is employed
complan dot HTML and this file is
present with an employee folder which in
turn is present in the app folder
remember the template URL is relative to
index dot HTML so let's specify depart
for the view template so it's present in
app slash employee slash employee dot
component dot HTML so at this point we
have our employee continent which
displays employee details in a table
next let's implement the fruit component
which displays the stage header employee
details we already have a root component
in place and that root component is in
app dot component dot t s file notice
within this class at the moment we have
a property called name let's change the
name of this property to page header and
the value is employee details at the
moment this component is referencing an
external view template app dot component
dot HTML which is present right here the
view template HTML is only three lines
long angular two recommends to extract
templates into a separate file if the
view template HTML is longer than three
lines in our case it's just three lines
so I'm going to move this HTML in line
into our typescript file so instead of
using template URL property let's use
the template property and a pair of
backtick characters within this pair of
practic characters let's include our
view template HTML I'm going to include
a development and inside this let's
include an h1 element to display the
page header let's close the h1 element
and our property name here is page
header so we have implemented our route
component as well so at this point we
have implemented our employee component
which displays the end
details in a table here is the
typescript file and the corresponding
butan plate and here we have our root
continent which displays the gauge
header
since the view template HTML here is
just three lines we have used an inline
template instead of an external template
and keep in mind
angular 2 recommends to extract and lay
it into a separate file if the view
template is longer than three lines so
with all these changes in place let's
run our application by pressing ctrl f5
and see what happens
notice at the moment we only have the
page header employee details we do not
have the table that displays the
employee details for us to be able to
display the employee details table along
with the page header we will have to
nest employee continent inside app
continent which is our fruit continent
there are two simple steps to nest a
continent inside another component the
first step is to make two modifications
within this file app dot module dot es
notice within this file we have a class
called app module we'll discuss what
this app module class is in just a bit
first let's make those two modifications
that are required just like how we have
imported our app component we will have
to import our employee component now at
the moment we will not have intelligence
here because we have not specified from
so first let's specify from we want to
import employee component from the
employee folder so within the employee
folder we have employee dot component
now within the curly braces look at this
the moment I type p.m. we get
intelligence employee continent and
within the declarations at the moment we
have app continent in addition to app
component we also want employee
continent so that's the first change
within app dot module dot es and here
are those two changes which we just made
so what is app module app module is the
root module which bootstraps and
launches the angular application you can
name this module anything you want but
by convention it is
all app module now let's understand the
code that we have in this module file
notice we are importing to system
modules engine module and close a module
browser module is required by all
angular applications that run in a web
browser in addition this module also
provides ng F and ng for directives will
discuss these directives with examples
in detail in our upcoming videos and
your module is required to add metadata
to an angular module remember the
component decorator adds metadata to an
angular component in a similar fashion
the ng module adds metadata to an
angular module
remember if we decorated plus with the
component decorator then that class
becomes an angular component in a
similar fashion if a class is decorated
with ng module then that class becomes
an angular component and then we are
importing app component and employee
components from the respective files now
let's look at the metadata that we have
here
notice here we are importing the browser
module which is required by all angular
applications that run in a web browser
and then within the declarations array
we've got these two components app
continent and employee content so
basically we are registering these two
components with this module and then we
have the bootstrapping component which
is our app component so basically this
is the fruit component which bootstraps
our application and we specified this
continent within our host page which is
index dot HTML
notice here we using a directive Maya
and if you remember within our app
confluent that my app directive is
specified as a selector so the first
step is to import the employee component
and add it to the declarations array
within the module file the second step
is to add my employee selector as a
directive with an apt or component or TS
file where we want to nest it so let's
flick to visual studio within our app
dot component or TS file so within the
view template here
just after h1 element inside the
development I am going to use my -
employee remember this is the selector
that we have used in our employee
component so if you look at employee dot
content or TS notice the selector is my
employee that means we can use the
selector as a directive where we want to
use this component and at the moment we
are nesting this component inside our
root component AB component so with
these changes in place let's reload the
webpage by pressing ctrl R notice we see
the employee details table along with
the page header employee details but at
the moment this employee details table
is not styled so to style that table
let's include these style definitions in
style dot CSS file for table and TD
elements so let's slip to visual studio
and let's open our Styles dot CSS file
we want to include a style for table and
I'm going to copy all these types that
we have for the h1 and specify them
right here
so the color is going to be the same
font family is going to be the same and
phone size I'm going to specify large
and we want to collapse the border so
border - claps : claps and let's include
a 1 pixel solid black border for TD so
border for the TD is going to be one
pixel solid black let's save these
changes and reload our web page notice
now the employee details table is styled
as expected thank you for listening and
have a great day