Angular ngFor directive Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 16 of angular 2 tutorial in
part 14 of this video series we
discussed one of the structural
directives ngf in angular in this video
we'll discuss another structural
directive ng4 let's understand the use
of this directive with an example so
here is what we want to do do is we have
a list of employee objects here each
employee object has got employee code
name gender annual salary and date of
birth so we want to display these
employee objects in an HTML table like
this let's see how to achieve this using
ng for structural director this is the
same project that we've been working
that so far in this video series we want
our Employee List
to be in its own component so to the
employees folder let's add a new type
script file
let's limit employee list component dot
TS let's click OK
first let's create our component class
export this keyword allows this
component to be exported so other
components can import and use it if
required class and in the name of our
competent class let's name our class
employee list component within this
class let's include this property
employees which contains the list of
employee objects that we want notice
that the moment we have set the type of
the RA as any which allows any type of
object to be added to this array it's
not a very good practice because this
array is not strongly typed
now the reason we have used any is
because at the moment we don't have a
type for our employee object in a later
video we'll discuss how to create
strongly typed arrays for now let's
include this employee's property within
our Employee List component class to
make this class an angular component we
need to decorate it with component
decorator for us to be able to do that
we will have to first import component
from angular core let's decorate this
class with component decorator first
let's set select a property I'm going to
set selector to list - employee we can
use the selector as a directive on an
HTML page where we want to use this
component we are going to have the view
template for our component in a separate
HTML file so to this employee folder
let's add a new HTML file I'm going to
name it employee list component dot HTML
let's click OK now let's associate this
HTML page as the view template by using
template URL property so template URL is
our Employee List dot component dot HTML
along the same lines
let's encapsulate all the styles that
are specific to this employee list
component in a separate style sheet
so to the employee folder let's add a
new style sheet and I'm going to name it
employee list dot component dot CSS now
we need to associate this style sheet
with our Employee List component using
style URLs property within the view
template of our employee component let's
include an HTML table notice within the
table element we have T head and T body
within T head we have th elements to
display these headers on the top code
name gender annual salary and date of
birth within T body element let's
include TR and on this TR I'm going to
use ng for directive
remember ng for is a structural
directive so we need to prefix that with
a strict indicating that it's a
structural directive and then our
directive ng for equals I'm going to use
the Lett keyword to create a variable
I'm going to name the variable employee
you can name it anything you want of
employees so what is this employees this
is the property that we have within our
component class and this property
contains an array of employee objects
so this ng for here is going to loop
through each employee object that we
have in the employees array and this
variable right here we call it template
input variable and this variable is
accessible by the steer element as well
as any of its children elements within
this TR I'm going to include TD elements
now we will use this TD elements to
display employee code name gender annual
salary and date of birth so I'm going to
use interpolation here we have the
template input variable employee so as
we are looking through each employee
object we want to retrieve their code
and similarly we also want to retrieve
their name gender annual salary and date
of birth so let's do the same thing with
the rest of the properties of the
employee object
and then we're going to use this
selector idea list employee as a
directive with another route component
so with an app dot content RTS within
the inline view template of this fruit
component let's use that list employee
selector as a directive with all these
changes in place let's run our
application by pressing control f5
notice it displays this message but
nothing happens beyond that so let's
launch browser developer tools and
investigate what's going on look at the
error message here list employee is not
a known element if list employee is an
angular component then verify that it is
part of this module so basically we have
to make our employee list component part
of our angular module at the moment we
only have one angular module within our
application that is the root module apt
of module dot PS so within this module
just like how we have imported add
component employee component we also
have to import our employee list
component and then we will have to
include this employee list component
within the declarations array just like
how we have included app component and
employee component so let's save these
changes and free loader webpage notice
now we see the list of employees as
expected but at the moment this table is
not styled so within our style sheet
that is employee less dot component dot
CSS lets include styles for table TD and
th elements let's save these changes and
reload this page notice now the table is
tiled as expected
now let's comment all these employee
objects within the array let's save our
changes and reload this web page one
more time notice it just displays the
header because we don't have any
employee objects within the array and we
don't have any employee objects along
with the header we also want to display
a message in the table saying
no employees to display so to achieve
this I'm going to use ng F structural
director so with an overview template
let's include another TR element and on
this TR element I'm going to use our
structural directive ng F equals and
then we specify our conditions if the
employees property does not exist within
our component class or the employees
property exists but the length is zero
that means we don't have any employee
objects within that array in both these
cases within the TD element we want to
display this message no employees to
display keep in mind we've got 5 th
elements so let's make this TD to span
across 5 TD elements so to do that let's
set it cost an attribute to 5 let's save
our changes and reload of web page
notice now we see the message as
expected
now let's uncomment the employee objects
save our changes and reload of a page
one more time notice now we see the
employees back now let's remove this
employee's property altogether
save our changes one more time and
reload this web page one more time
notice again we see the message no
employees to display as expected and
here is that code to achieve it thank
you for listening and have a great day