What about 'nested' components in Angular 2+?

Question

In Angular 2+ versions, how can I solve a problem like this?

I have some data, what I got from the server. I iterate over the array of data,and I want to display each objects. So (for example) if I have a list of the registrated users, and I want to display a list of the users, what is the correct solution?

1, I need an another Angular component for the list elements (which contains the user informations, and the related functions) 2,or I just use a simple loop, and parse data to a template?

You may want to look into how to store your user data within the Angular application's "state". Additionally , I would use ngFor directive for iterating over the loop. Dont use a traditional for loop because the ngFor will optimize things for you. You need to be careful if the size of the array is very big. In that case you can use the trackBy directive. Ill try to find a good example somewhere. — Peter Hauge
– Peter Hauge, Commented Mar 14, 2018 at 0:50

Stan · Accepted Answer · 2018-03-14 00:52:26Z

3

It's totally up to you. I would choose option 2 for simplicity.

// some.component.ts
export class SomeComponent implements OnInit {

  users = {};

  constructor(private data: DataService) { }

  ngOnInit() {
    this.users = this.data.getUserInformation();
  }

}

-

// some.component.html
<div *ngFor="let user of users">
  <p>user.name</p>
  ...
</div>

edited Mar 14, 2018 at 0:52

answered Mar 14, 2018 at 0:43

Stan

4761 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

What about 'nested' components in Angular 2+?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related