Skip to main content

Related Articles

Angular NgFor directive and trackby

angular ngfor trackby example


Today we will learn about NgFor one of the core directive of angular. NgFor helps to build list and tables in Angular

 

Let us see the example in our flower store app. In the landing page I am going to print list of flowers that are available in the store. Later we will add images and show them in a carousel to rotate automatically.


First we will create the domain class called flower.ts and you can copy paste below code. 


export class flower{
  constructor() { }
  name:string='';
  price:number = 0;
  availableQuantity:number = 0
}


To use this domain class inside another component you must specify export keyword along with the class keyword.

Flower domain has 3 attributes to store name of the flower then price and the available quantity.

Now we can create the array from the flower type as below inside the landing.component.ts file.


myFlowerList:flower[]=[];


I will call a method inside ngOnInit to add values to the array as below.

ngOnInit is one of the life cycle hooks used in angular and it executed only one time when component is initiating.


ngOnInit() {
    this.mySellingFlowers();
  }

  mySellingFlowers(){
    let rose = new flower();
    rose.name = "Rose";
    rose.price = 100;
    rose.availableQuantity = 1000;
    this. myFlowerList.push(rose);

    let lily = new flower();
    lily.name = "Lily";
    lily.price = 80;
    lily.availableQuantity = 2000;
    this. myFlowerList.push(lily);

    let tulip = new flower();
    tulip.name = "Tulip";
    tulip.price = 100;
    tulip.availableQuantity = 2300;
    this. myFlowerList.push(tulip);

    let carnation = new flower();
    carnation.name = "Carnation";
    carnation.price = 50;
    carnation.availableQuantity = 1500;
    this. myFlowerList.push(carnation);
  }


Now we have an array with different flowers. Let’s see how we can iterate the array using ngFor directive.

Copy paste below code in you landing.component.html file.


<ul>
    <li *ngFor="let flower of myFlowerList">
        {{flower.name}}
    </li>
</ul>
 


myFlowerList is the array that we defined and initiated in the landing.component.ts file.

*ngFor is helping to loop the array element and it will hold each element in flower object and you can access it properties with the . operator.

{{}} is called interpolation and it will print the value of the variable in your browser.

Now let’s check our browser. Here it is.


angular ngfor trackby example - flower store

Finding the index of a list element

 

Now let’s see how you can track the index of each element and use that index to generate unique id for each flower element.


<ul>

    <li *ngFor="let flower of myFlowerList;let i = index">

        <span id="flower_{{i}}">{{flower.name}}</span>

    </li>

</ul>
track the index of each element and use that index to generate unique id

How to use trackBy?

Track by function is using to improve performance. If you don’t use track by function whenever your array get change it will reload the whole DOM object but with track by function it will change only that element.

 

To use trackby function you can update landing.component.html file as below


<ul>
    <li *ngFor="let flower of  myFlowerList;trackBy:trackFlowers">
        <span >{{flower.name}}</span>
    </li>
</ul>


Then define the trackFlower function in landing.component.ts file as below.


trackFlowers(index,flower){
    return flower?flower.name:undefined
}

I hope you enjoyed the post. In next post we will apply some styles and background flower images to our flower list.


Comments

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on...

When Submit A Post To Pligg Site I Am Getting "Wrong Step" Error

Recently I noticed that my Pligg social bookmarking site does not get any new post from the community. Then I try to submit a post to the site and on the second step of the article submission page I got the error "Wrong Step". I was really confused and try to figure out the issue. When I search on the web, I found few answers and none of the solutions were addressed my issue. Some of the reasons that the support forums were discussed are: 1. "Wrong Step" error might occur due to new template you use for your pligg site. 2. Configuration changes, basically f_open() function configuration. Most of the time this could happen when your hosting company upgrade their servers or change the security configuration of their servers.

SMPP protocol library for fast and easy SMSC(Short Message Service Centre) client development even for non-telecom guys

SMS sending through .NET C# is really easy. But most of the guys face many issues with SMSC client developments. SMPP protocol has many parameters to configure, but for simple SMPP gateway application you need very few of them to configure correctly. This article will cover how to implement SMSC client application using EasySMPP library. EasySMPP is a free SMPP library used by many people to implement SMS sending applications. There are many SMPP libraries but EasySMPP library is very easy to use and relatively stable. EasySMPP library mainly contain five class library projects. KernelParameters, SMPPClient, SMSClient, SMSService and Tools are the library projects and you only need to use SMSClient library to implement SMPP client application. First download EasySMPP library and add class library project to your .NET C# solution.  1. public bool SendSms( string from, string to, string text)