What is the best way to execute a function on the output of *ngFor directive in Angular 2?

Question

What is the best way to execute a function on the output of *ngFor directive in Angular 2?

Imagine having a list of all the users within your system:

  allUsers = {
    a: {name:'Adam',email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="39585d5854794d5c4a4d5a56175a56...
    f: {name:'fred',email:'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e187938485a195849295828ecf82...

  }

Now, envision having another list that contains the users involved in a specific project:

usersList = ['a','b','d','f'];

To simplify the process, you can utilize a function that takes a user ID and retrieves additional user details:

  getUser(userId){
    console.log('Getting User with Id:', userId);
    if(allUsers[userId]) return allUsers[userId];
  }

However, when utilizing *ngFor to iterate through the users in the list within the template, there seems to be an issue retrieving the complete set of user details:

<tr *ngFor="#userId in usersList" #user="getUser(userId)">
  <td>{{user.name}}</td>
</tr>

This method doesn't seem optimal as it calls the getUser function repeatedly. Is there a simpler way to access the userId variable and define it as a local variable?

Feel free to check out this plunker for my current experimentations

typescript angular angular2-template

Answer 1

Answer №1

While the ngFor template directive allows for creating a variable, it is limited to values such as index, even, odd, and last.

In cases where you need to manipulate data, using a custom pipe can be helpful. By passing usersList and allUsers to a custom @Pipe called getUsers, you can create a filter similar to Angular1.

Example Usage:

<tr *ngFor="let user of usersList | getUsers: allUsers">
  <td>
    {{user.name}}
  </td>
  <td>
    {{user.email}}
  </td>
  <td>
    {{user.level}}
  </td>
  <td>
    {{user.group}}
  </td>
</tr>

Code Implementation:

@Pipe({
  name: 'getUsers',
  pure: false
})
export class GetUserPipe implements PipeTransform {
  constructor(){
    this.test = 'Test';
  }
  transform(array:Array<string>, object: any) : any {
    // Using a for..in loop
    let output = [];
    for (var num in array)
    {
      // Accessing object properties with array elements
      output.push(object[0][array[num]]);
    }
    console.log(output)
    return output;
  }
}

View Demo on Plunkr

Answer 2

While the ngFor template directive allows for creating a variable, it is limited to values such as index, even, odd, and last.

In cases where you need to manipulate data, using a custom pipe can be helpful. By passing usersList and allUsers to a custom @Pipe called getUsers, you can create a filter similar to Angular1.

Example Usage:

<tr *ngFor="let user of usersList | getUsers: allUsers">
  <td>
    {{user.name}}
  </td>
  <td>
    {{user.email}}
  </td>
  <td>
    {{user.level}}
  </td>
  <td>
    {{user.group}}
  </td>
</tr>

Code Implementation:

@Pipe({
  name: 'getUsers',
  pure: false
})
export class GetUserPipe implements PipeTransform {
  constructor(){
    this.test = 'Test';
  }
  transform(array:Array<string>, object: any) : any {
    // Using a for..in loop
    let output = [];
    for (var num in array)
    {
      // Accessing object properties with array elements
      output.push(object[0][array[num]]);
    }
    console.log(output)
    return output;
  }
}

View Demo on Plunkr

Answer 3

Answer №2

I enjoy using

<td>{{getMember(memberId).name}}</td>

That method works well for me. It's much simpler than having to create a pipe or filter.

Even if there was an option to use a local template variable, I think it would still be re-evaluated for each item in the list during every change detection cycle, similar to the HTML code mentioned above.

For more information, check out ng2: How to create variable in ngFor loop. One suggestion is to create a child component and pass getMember(memberId) as an input property for that component.

Answer 4

I enjoy using

<td>{{getMember(memberId).name}}</td>

That method works well for me. It's much simpler than having to create a pipe or filter.

Even if there was an option to use a local template variable, I think it would still be re-evaluated for each item in the list during every change detection cycle, similar to the HTML code mentioned above.

For more information, check out ng2: How to create variable in ngFor loop. One suggestion is to create a child component and pass getMember(memberId) as an input property for that component.

Answer 5

Answer №3

Here is an example of how you can structure your markup:

<tr *ngFor="theUser in getTheUsers(usersList)" >
   <td>{{theUser.name}}</td>
</tr>

The getTheUsers() function should look something like this:

getTheUsers(usersList:string[]){
  return usersList.map(user=> this.allUsers[user]); 
}

Answer 6

Here is an example of how you can structure your markup:

<tr *ngFor="theUser in getTheUsers(usersList)" >
   <td>{{theUser.name}}</td>
</tr>

The getTheUsers() function should look something like this:

getTheUsers(usersList:string[]){
  return usersList.map(user=> this.allUsers[user]); 
}

Answer 7

Answer №4

Take a look at another method I developed that utilizes ng-container, *ngIf with let. It eliminates the need for a subcomponent and instead creates an object through the *ngIf expression (which is always truthy, resulting in the content being rendered consistently). The computed value is stored in a property of this object, which is then assigned to a local variable using the *ngIf syntax.

Answer 8

Take a look at another method I developed that utilizes ng-container, *ngIf with let. It eliminates the need for a subcomponent and instead creates an object through the *ngIf expression (which is always truthy, resulting in the content being rendered consistently). The computed value is stored in a property of this object, which is then assigned to a local variable using the *ngIf syntax.

What is the best way to execute a function on the output of *ngFor directive in Angular 2?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to ensure that multiple queries are returned in the correct sequence?

Trouble with using the date pipe in Angular specifically for the KHMER language

Upon receiving data from the Api, the data cannot be assigned to the appropriate datatype within the Angular Object

Can you explain the concept of static in Typescript?

utilize Angular's interface-calling capabilities

Issue with Promise not resolving in Node when using Edge

No overload error encountered with TypeScript function call

Developing Angular PWAs with a focus on microfrontends

Unleashing the full potential of Azure DevOps custom Tasks in VS Code and TypeScript: A guide to configuring input variables

Problem with moving functions from one file to another file via export and import

Filtering an observable using criteria from another source

Variables within Angular2 services are resetting when the route changes

Discovering Virtual Directories within IIS using port 4200 in Angular

How can I change an icon and switch themes using onClick in react js?

Angular 7 router navigate encountering a matching issue

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

Angular 4's OrderBy Directive for Sorting Results

Generate a placeholder payload for CdkDragDrop event

An error occurred with the datepicker: Unable to connect to 'bsValue' as it is not recognized as a property of 'input'

Why won't my fetch API function properly in my Next.js project?