How to return multiple prop from NGFOR trackby function in angular 7?

May 25, 2021

Return multiple Properties from NGFOR track by function in angular 7.

Multiple Properties from NGFOR track by function in angular 7:

An optional function passed to the NgForOf instruction that determines how to track changes to the iterable. This function uses iteration index and element ID. Upon delivery, Angular monitors changes in the return value of the function.

interface TrackByFunction<T> {
  (index: number, item: T): any
}

We know this is outdated, but I think the problem lies in the way the response of the compare tracker is handled. In your example, you use another object that is always different from another object to answer.

if you are creating an object. you have limited properties and you compare this object to another object then properties are the same but the object is different

{a: "ehhhh", b:"bee", c:"cee"}

we are returned the object JSON.stringify(tricked bj) and if compared to two strings, we needed to change the direction of two boolean values to trigger.

Properties of ngfor:

@Input()
ngForOf: (U & T[]) | (U & Iterable<T>)

@Input()
ngForTrackBy: TrackByFunction<T>

@Input()
ngForTemplate: TemplateRef<NgForOfContext<T, U>><T>

ngfor Directive: The main work of the directive is rendering of the array.

<ul>
    <li ng-repeat="user in users">
         email: {{user.email}}
        work: {{user.work}}
        username: {{user.username}}
    </li>
</ul>

Dom element creating and manipulating the dom structural directives

array = [
    {
        id: 0,
        name: "sofwarequey.com"
    },
    {
        id: 1,
        name: "phpwritter"
    } 
]
trackBy: (item) => item.id

@component({
    template: `
        <ul>
            <li *ngFor="let user of users">
                 email: {{user.email}}
        work: {{user.work}}
        username: {{user.username}}
            </li>
        </ul>
    `
})
class NgForEx {
    users: Array<User> = [
        {
             email: "softwarequery786@gmail.com"
             work:    "website"
            username:  softwarequery
        },
        {
            email: "softwarequery786@gmail.com"
             work:    "website"
            username:  softwarequery
        }
    ] 
}
interface User {
    name: string;
    address: string;
    phone: number;
}

After executing this code the output is here :

<ul>
    <li>
        email: "softwarequery786@gmail.com"
         work:    "website"
         username:  softwarequery
    </li>
    <li>
        email: "softwarequery786@gmail.com"
         work:    "website"
         username:  softwarequery
    </li>
</ul>

A User with email, work, and username properties. it initializes the user's array property in the forex class. it is used the ngFor directive and every DOM with template expressions: {{user.email}}, {{user.work}} and {{user.username}}.

@component({
    template: `
        <div>
            <div>
                <input type="text" placeholder="Enter Name" [(ngModel)]="email" />
                <input type="number" placeholder="Enter Age" [(ngModel)]="work" />
                <input type="number" placeholder="Enter Phone" [(ngModel)]="username" />
                <button (click)="addUser()">Add User</button>
            </div>
            <ul>
                <li *ngFor="let user of users">
                    email: {{user.email}}
                    work: {{user.work}}
                    username: {{user.username}}
                </li>
            </ul>
        </div>
    `
})
class NgForEx {
    name: string = ""
    address: string
    phone: number
    users: Array<User> = [
        {
            email: "Softwarequery786@gmail.com",
            work: "website",
            username: Softwarequery
        }.
        {
            email: "Softwarequery786@gmail.com",
            work: "website",
            username: Softwarequery
        }
    ] 
    addUser() {
        this.users = this.users.concat([{
            name: this.name,
            age: this.age,
            phone: this.phone
        }])
        this.clearDetails()
    }
    clearDetails() {
        this.name = ""
        this.age = null
        this.phone = null
    }
}

If we fill out the form and click the Add User button, the input values are summarized and added to the array of users. This component restarts to update the appearance of new records in the user's array.

Rendering arrays in ngFor causes excessive DOM manipulation.

Our example above is too simple to display an in-app delay. Imagine repeating more than 10,000 objects in an array.

@component({
    template: `
        <div>
            <div>
                <input type="text" placeholder="Enter Name" [(ngModel)]="name" />
                <input type="number" placeholder="Enter Age" [(ngModel)]="age" />
                <input type="number" placeholder="Enter Phone" [(ngModel)]="phone" />
                <button (click)="addUser()">Add User</button>
            </div>
            <ul>
                <li *ngFor="let user of users">
                      email: {{user.email}}
                      work: {{user.work}}
                      username: {{user.username}}
                </li>
            </ul>
        </div>
    `
})
class NgForEx {
    name: string = ""
    age: number
    phone: number
    users: Array<User> = [
        {
            id: 0,
            email: "softwarequery786@gmail.com"
             work:    "website"
            username:  softwarequery
        }.
        {
            id: 1,
           email: "ershubham37@gmail.com"
             work:    "website"
            username:  softwarequery
        }
    ] 
    id: number = 1
    constructor() {
        for(var i = 0; i < 100000; i++) {
            this.users.push({
                id: this.id++,
               email: "softwarequery786@gmail.com"
             work:    "website"
            username:  softwarequery
            })
        }
    }
    addUser() {
        this.users = this.users.concat([{
            id: this.id++,
            name: this.name,
            age: this.age,
            phone: this.phone
        }])
        this.clearDetails()
    }
}

Lets Solve the problem using track by:

Differs provides a feature that allows us to provide our own change detection mechanism in the list. Deferred uses a function in trackBy to determine how to recognize changes to items in the list.

array = [
    {
        id: 0,
        name: "sofwarequey.com"
    },
    {
        id: 1,
        name: "phpwritter"
    } 
]
trackBy: (item) => item.id

array = array.concat([
    {
        id: 2,
        name: "program"
    }
])
array = [
    {
        id: 0,
        name: "softwarequery"
    },
    {
        id: 1,
        name: "phpwritter"
    },
    {
        id: 2,
        name: "nnamdi"
    } 
trackBy: (item) => item.id

@component({
    template: `
        <div>
            <div>
                <input type="text" placeholder="Enter Name" [(ngModel)]="email" />
                <input type="number" placeholder="Enter Age" [(ngModel)]="work" />
                <input type="number" placeholder="Enter Phone" [(ngModel)]="username" />
                <button (click)="addUser()">Add User</button>
            </div>
            <ul>
                <li *ngFor="let user of users; trackBy: trackById">
                    Email: {{user.email}}
                    Work: {{user.work}}
                    Username: {{user.username}}
                </li>
            </ul>
        </div>
    `
})
class NgForEx {
    name: string = ""
    age: number
    phone: number
    users: Array<User> = [
        {
            id: 0,
            username: "softwarequery"
,           work: "livewebsite",
            email: "ershubham37@gmail.com"
        }.
        {
            id: 1,
           username: "phpwritter"
,           work: "website",
            email: singhsmith9@gmail.com
        }
    ] 
    id: number = 1
    constructor() {
        for(var i = 0; i < 100000; i++) {
            this.users.push({
                id: this.id++,
                work: this.work,
               email: this.email,
         
                username:0384793 + this.id++
            })
        }
    }
    addUser() {
        this.users = this.users.concat([{
            id: this.id++,
            work: this.work,
            email: this.email,
            username: this.username
        }])
        this.clearDetails()
    }
    trackById(index: email, item:  username) {
        return item.id
    }
}

Return multiple Properties from NGFOR track by function in angular 7.

Multiple Properties from NGFOR track by function in angular 7:

Comments