Front-End Programming Exam > Front-End Programming Videos > Angular 2 tutorial > Angular ngFor trackBy
Angular ngFor trackBy Video Lecture | Angular 2 tutorial - Front-End Programming
|
43 videos
|
FAQs on Angular ngFor trackBy Video Lecture - Angular 2 tutorial - Front-End Programming
| 1. What is the purpose of using trackBy in ngFor? |  |
Ans. The purpose of using trackBy in ngFor is to improve the performance and efficiency of Angular's change detection mechanism. By using trackBy, Angular can track and identify each item in a collection, allowing it to efficiently update the DOM only for the changed items instead of re-rendering the entire list.
| 2. How does trackBy improve performance in ngFor? | |
Ans. When ngFor is used without trackBy, Angular uses the default tracking mechanism which is based on the index of each item in the collection. This means that even if the content of a particular item has not changed, Angular will still re-render it if the position of the item in the array changes. On the other hand, by using trackBy, Angular can track items based on a unique identifier, such as an ID, ensuring that only the changed items are re-rendered and reducing unnecessary DOM manipulations.
| 3. How do you implement trackBy in ngFor? | |
Ans. To implement trackBy in ngFor, you need to provide a function that takes two arguments: the index of the item and the item itself. This function should return a unique identifier for the item. For example, if you have an array of objects with an "id" property, you can use the "id" as the identifier. The trackBy function is then passed as a parameter to the ngFor directive like this: *ngFor="let item of items; trackBy: trackByFn".
| 4. What happens if trackBy returns null or undefined? | |
Ans. If the trackBy function returns null or undefined for an item, Angular will use the default tracking mechanism based on the index. This means that Angular will re-render the item if its position in the array changes, even if the content of the item has not changed. Therefore, it is important to ensure that the trackBy function returns a valid and unique identifier for each item in order to achieve optimal performance.
| 5. Can trackBy be used with nested ngFor loops? | |
Ans. Yes, trackBy can be used with nested ngFor loops. In this case, each ngFor loop should have its own trackBy function that returns a unique identifier for the items in that loop. By doing this, Angular can efficiently track changes in both the outer and inner loops, ensuring that only the necessary items are re-rendered when there are changes.
Text Transcript from Video
this is part 17 of Angela to tutorial in
this video we'll discuss why and how to
use track by with nu4 directive how to
get the index of an item in a collection
identifying the first and the last
elements in a collection and similarly
identifying even and odd elements in a
collection
so first let's see why and how to use
track by with ng for director ng for
directive is typically used to iterate
over a list of items if that list is
small then we are okay if we don't use
track by with large less ng 4 directive
may perform poorly a small change to the
list like adding a new element or
removing an existing element may trigger
a cascade of Dom manipulations and may
lead to performance issues let's look at
an example this is the same project that
we worked with in our previous video I'm
going to make a few changes to this
Employee List component class first of
all I'm going to have our employees
property declaration right here and then
move this code into the constructor to
create a constructor we use the keyword
constructor and let's close the
constructor right here and since we
already have this property declared I'm
going to use this key but so this dot
employees equals the list of employee
objects that we have I'm going to
include a method as well in this
Employee List component class let's call
the method get employees this method is
not going to return anything so I'm
going to set the return type to void and
all this method is going to do is set
the employees property to an array of
employee objects and if look at this
collection right here the first four
employee objects are the same objects
that we have right here in addition to
those four objects it's adding a fifth
employee object and then within the view
template I'm going to include a break
element
and a button element let's bind to the
click event of the button so when we
click the button we want to call this
method get employees the text on the
button is refresh employees so with all
these changes in place let's run our
project by pressing ctrl f5 notice on
the initial page load we have before
employee objects that we have that
another constructor when we click this
refresh employees button they're calling
this get employees method this method is
returning a fifth employee object as
well so when we click the button notice
we see the fifth employee object now
when we click refresh employees button
notice it appears as if nothing is
happening but behind the scenes angela
is tearing down all these TR and the
respective TD elements and recreating
them every time we click this refresh
employees button to confirm this let's
launch browse the developer tools click
on the elements tab and then expand my
app list employee table antibody
underneath the body we have all the TR
elements now let's click this refresh
employees button and see what happens
notice every time we click this refresh
employees button the color of these TR
elements is briefly changing indicating
that all those TR and TD elements are
being teardown and recreated every time
we click this button that's because by
default angular keeps track of these
employee objects using their object
references and when we click the button
we are returning new object references
so angular does not know whether it is
dealing with the same list of employee
objects or a different list of employee
objects that's why it is tearing down
and recreating all the respective TR and
TD elements this is a small s so we
don't notice any performance issues but
if it's a large list we may have
performance issues so to avoid this we
can use
track by with ng4 director so with no
competent class I'm going to include
another method I'm going to call this
method track by employee code so we're
going to use this method to track the
employee objects and we are going to
track the employee objects using their
employee code instead of their object
references and this method is going to
take in two parameters the index of the
employee object that we are iterating
over index is a number so let's set the
data type as number and then the second
parameter is the employee object itself
we don't have it type for the employee
object so I am going to set the type as
any and we want to be able to track
using the employee code and if you look
at employee code it's a string so this
method is going to return string and all
this method is going to do is return
employee code and we will to use this
function to track our employee objects
so within the view template wherever we
are using our ng4 directive I'm going to
specify a semicolon and use this
property tracked by we want to track by
this function which returns employee
code so basically with this change we're
told angular to track employee objects
by using their employee code and not
their object references so let's save
all these changes and reload of webpage
now notice on the initial page load we
have our four employee objects let's
expand my app list employee table T body
and let's look at those four TR elements
now look at this when I click this
refresh employees button the first time
the color of these four TR elements will
not change only the color of the new TR
element that is going to be added you
know will be briefly highlighted
indicating that that's the only dominant
that is added so look at this when I
click refresh employees look at that
only that changed and
happens only the first time and next
time and we click refresh employees look
at that the color of these TR elements
does not change indicating that there is
no change made to these Dom elements
because now angela is keeping track of
these employee objects using their
employee code and every time we click
this refresh employees button we are
returning the same employee codes so
they didn't change so though we are
returning different object references
because we have the same employee codes
and they didn't change angular knows the
objects did not change and hence it
didn't tear down and recreate the TR and
TD elements so using track PI with ng
for when you have large less may improve
the performance of your application here
is that same code which we just
discussed now let's see how to get the
index of an item in a collection so
here's what we want to do we want to
display the index of every employee item
that we have in this table in another
column right here so let's do the
required changes so first within the
view template let's include another pH
element here and we want to display the
index of the item as well and we're
going to include another TD element here
and interpolation expression and here on
the ng 4 I'm going to use that keyword
to create a variable I'm going to call
it AI equals and then I will use the
index property of our ng 4 directive so
that's going to return the index of
every employee object that we are
iterating over and then we are going to
use this variable I to retrieve the
index so within the interpolation here
we're going to specify that letter I
which contains the index of the employee
object that we are iterating over so
let's see what changes and reload this
webpage notice now we see the index of
the employee objects here is that same
code which we just discussed now let's
see how to identify the first and last
elements in a collection
so let's slip back to visual studio now
I'm going to create another variable
here so let's use another let keyboard
and I'm going to call the variable is
first equals and I'm going to use the
first property of ng for director
similarly I'm going to use another let
keyword and I'm going to use this
variable here is last equals and let's
use the last property of our ng for
director so within these variables is
first and is last you will have true or
false indicating whether if the employee
object that we are iterating over is
first or last element and let's include
two 3td elements here and let's display
the value that we have in is first
variable and let's do the same thing
that is last variable and we need to
include to th elements is first and
another th element for last let's say
all these changes and reload of web page
notice we see the first and last
elements and here is that code which we
just discussed
finally let's see how to identify even
and odd elements in a collection the
idea is same I'm going to use two more
left keywords so let is even equals as
you might have guessed we have even
property of the ng for directed that we
are going to make use of similarly let's
use let again is odd equals odd property
of the ng for directive and then within
the table let's include two more TD
elements so within the first TD elements
let's display the value that we have in
ease even property and in the other TD
let's include the value we have n is odd
property and finally let's include two
more th elements is even
and another th element for is odd let's
say your changes and reload of webpage
notice that is true for all even
elements and in this column we have true
for all odd elements and here is that
same code thank you for listening and
have a great day
this video we'll discuss why and how to
use track by with nu4 directive how to
get the index of an item in a collection
identifying the first and the last
elements in a collection and similarly
identifying even and odd elements in a
collection
so first let's see why and how to use
track by with ng for director ng for
directive is typically used to iterate
over a list of items if that list is
small then we are okay if we don't use
track by with large less ng 4 directive
may perform poorly a small change to the
list like adding a new element or
removing an existing element may trigger
a cascade of Dom manipulations and may
lead to performance issues let's look at
an example this is the same project that
we worked with in our previous video I'm
going to make a few changes to this
Employee List component class first of
all I'm going to have our employees
property declaration right here and then
move this code into the constructor to
create a constructor we use the keyword
constructor and let's close the
constructor right here and since we
already have this property declared I'm
going to use this key but so this dot
employees equals the list of employee
objects that we have I'm going to
include a method as well in this
Employee List component class let's call
the method get employees this method is
not going to return anything so I'm
going to set the return type to void and
all this method is going to do is set
the employees property to an array of
employee objects and if look at this
collection right here the first four
employee objects are the same objects
that we have right here in addition to
those four objects it's adding a fifth
employee object and then within the view
template I'm going to include a break
element
and a button element let's bind to the
click event of the button so when we
click the button we want to call this
method get employees the text on the
button is refresh employees so with all
these changes in place let's run our
project by pressing ctrl f5 notice on
the initial page load we have before
employee objects that we have that
another constructor when we click this
refresh employees button they're calling
this get employees method this method is
returning a fifth employee object as
well so when we click the button notice
we see the fifth employee object now
when we click refresh employees button
notice it appears as if nothing is
happening but behind the scenes angela
is tearing down all these TR and the
respective TD elements and recreating
them every time we click this refresh
employees button to confirm this let's
launch browse the developer tools click
on the elements tab and then expand my
app list employee table antibody
underneath the body we have all the TR
elements now let's click this refresh
employees button and see what happens
notice every time we click this refresh
employees button the color of these TR
elements is briefly changing indicating
that all those TR and TD elements are
being teardown and recreated every time
we click this button that's because by
default angular keeps track of these
employee objects using their object
references and when we click the button
we are returning new object references
so angular does not know whether it is
dealing with the same list of employee
objects or a different list of employee
objects that's why it is tearing down
and recreating all the respective TR and
TD elements this is a small s so we
don't notice any performance issues but
if it's a large list we may have
performance issues so to avoid this we
can use
track by with ng4 director so with no
competent class I'm going to include
another method I'm going to call this
method track by employee code so we're
going to use this method to track the
employee objects and we are going to
track the employee objects using their
employee code instead of their object
references and this method is going to
take in two parameters the index of the
employee object that we are iterating
over index is a number so let's set the
data type as number and then the second
parameter is the employee object itself
we don't have it type for the employee
object so I am going to set the type as
any and we want to be able to track
using the employee code and if you look
at employee code it's a string so this
method is going to return string and all
this method is going to do is return
employee code and we will to use this
function to track our employee objects
so within the view template wherever we
are using our ng4 directive I'm going to
specify a semicolon and use this
property tracked by we want to track by
this function which returns employee
code so basically with this change we're
told angular to track employee objects
by using their employee code and not
their object references so let's save
all these changes and reload of webpage
now notice on the initial page load we
have our four employee objects let's
expand my app list employee table T body
and let's look at those four TR elements
now look at this when I click this
refresh employees button the first time
the color of these four TR elements will
not change only the color of the new TR
element that is going to be added you
know will be briefly highlighted
indicating that that's the only dominant
that is added so look at this when I
click refresh employees look at that
only that changed and
happens only the first time and next
time and we click refresh employees look
at that the color of these TR elements
does not change indicating that there is
no change made to these Dom elements
because now angela is keeping track of
these employee objects using their
employee code and every time we click
this refresh employees button we are
returning the same employee codes so
they didn't change so though we are
returning different object references
because we have the same employee codes
and they didn't change angular knows the
objects did not change and hence it
didn't tear down and recreate the TR and
TD elements so using track PI with ng
for when you have large less may improve
the performance of your application here
is that same code which we just
discussed now let's see how to get the
index of an item in a collection so
here's what we want to do we want to
display the index of every employee item
that we have in this table in another
column right here so let's do the
required changes so first within the
view template let's include another pH
element here and we want to display the
index of the item as well and we're
going to include another TD element here
and interpolation expression and here on
the ng 4 I'm going to use that keyword
to create a variable I'm going to call
it AI equals and then I will use the
index property of our ng 4 directive so
that's going to return the index of
every employee object that we are
iterating over and then we are going to
use this variable I to retrieve the
index so within the interpolation here
we're going to specify that letter I
which contains the index of the employee
object that we are iterating over so
let's see what changes and reload this
webpage notice now we see the index of
the employee objects here is that same
code which we just discussed now let's
see how to identify the first and last
elements in a collection
so let's slip back to visual studio now
I'm going to create another variable
here so let's use another let keyboard
and I'm going to call the variable is
first equals and I'm going to use the
first property of ng for director
similarly I'm going to use another let
keyword and I'm going to use this
variable here is last equals and let's
use the last property of our ng for
director so within these variables is
first and is last you will have true or
false indicating whether if the employee
object that we are iterating over is
first or last element and let's include
two 3td elements here and let's display
the value that we have in is first
variable and let's do the same thing
that is last variable and we need to
include to th elements is first and
another th element for last let's say
all these changes and reload of web page
notice we see the first and last
elements and here is that code which we
just discussed
finally let's see how to identify even
and odd elements in a collection the
idea is same I'm going to use two more
left keywords so let is even equals as
you might have guessed we have even
property of the ng for directed that we
are going to make use of similarly let's
use let again is odd equals odd property
of the ng for directive and then within
the table let's include two more TD
elements so within the first TD elements
let's display the value that we have in
ease even property and in the other TD
let's include the value we have n is odd
property and finally let's include two
more th elements is even
and another th element for is odd let's
say your changes and reload of webpage
notice that is true for all even
elements and in this column we have true
for all odd elements and here is that
same code thank you for listening and
have a great day
Related Exams
About this Video
|
4.68/5 Rating |
|
Nov 06, 2024 Last updated |
Video Description: Angular ngFor trackBy for Front-End Programming 2024 is part of Angular 2 tutorial preparation.
The notes and questions for Angular ngFor trackBy have been prepared according to the Front-End Programming exam syllabus.
Information about Angular ngFor trackBy covers all important topics for Front-End Programming 2024 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Angular ngFor trackBy.
Introduction of Angular ngFor trackBy in English is available as part of our Angular 2 tutorial for Front-End Programming & Angular ngFor trackBy in
Hindi for Angular 2 tutorial course. Download more important topics related with notes, lectures and mock test series for
Front-End Programming Exam by signing up for free.
Description
Video Lecture & Questions for Angular ngFor trackBy Video Lecture | Angular 2 tutorial - Front-End Programming - Front-End Programming full syllabus preparation | Free video for Front-End Programming exam to prepare for Angular 2 tutorial.
Information about Angular ngFor trackBy
Here you can find the meaning of Angular ngFor trackBy defined & explained in the simplest way possible.
Besides explaining types of Angular ngFor trackBy theory, EduRev gives you an ample number of questions to practice Angular ngFor trackBy tests,
examples and also practice Front-End Programming tests.
|
43 videos
|
|
Explore Courses for Front-End Programming exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
Important questions
,Sample Paper
,Summary
,Viva Questions
,Previous Year Questions with Solutions
,Extra Questions
,ppt
,past year papers
,practice quizzes
,Free
,shortcuts and tricks
,Semester Notes
,study material
,Exam
,mock tests for examination
,Angular ngFor trackBy Video Lecture | Angular 2 tutorial - Front-End Programming
,Angular ngFor trackBy Video Lecture | Angular 2 tutorial - Front-End Programming
,MCQs
,video lectures
,Objective type Questions
,Angular ngFor trackBy Video Lecture | Angular 2 tutorial - Front-End Programming
;
Study Angular ngFor trackBy on the App
Students of Front-End Programming can study Angular ngFor trackBy alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Angular ngFor trackBy,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of Angular ngFor trackBy is prepared as per the latest Front-End Programming syllabus.
|
© EduRev
|
Education Revolution
|
Follow Us
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup