Angular 6+: Pass array name in ngFor from @input

Question

I've created a list component, running successfully through an array of items and outputting its data through an *ngFor loop.

now I want to reuse this component and add more possible arrays of data to choose from. for that, an @input was created, allowing me to pass the array name "on" the component wherever it's used, but when I try to pass it to the *ngFor I get an error.

my ts code is:

@Input() listName : string;
list1: any = [
 {title: 'title1'},
 {title: 'title2'},
 {title: 'title3'},
]
list2: any = [
 {title: 'titlea'},
 {title: 'titleb'},
 {title: 'titlec'},
]

the component looks like this:

<app-listcomp listName="list1"></app-listcomp>

I can figure that this is not a correct syntax inside the component:

*ngFor="let listItem of {{listName}}"

but can't quit find what is the correct way to pass the array name through the @Input (or any other correct way).

when I use the specific array name in the *ngFor loop - it works perfectly of course.

if listName is an array as input then it should be *ngFor="let listItem of listName", post the component code too. — Muthu R
– Muthu R, Commented Jun 5, 2019 at 7:51

John Velasquez · Accepted Answer · 2019-06-05 08:28:09Z

1

Well you can do something like this

Class:

getList() {
  return this[this.listName];
}

Template:

*ngFor="let listItem of getList()"

edited Jun 5, 2019 at 8:28

answered Jun 5, 2019 at 7:54

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

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

2 Comments

C.Champagne Over a year ago

Er...you pass the list you want to retrieve. Isn't it a bit dumb?

John Velasquez Over a year ago

Yeah I know, its an alternative solution for your requirements, because you cannot do interpolation in *ngFor

C.Champagne · Accepted Answer · 2019-06-05 08:56:06Z

0

There are several solutions but it depends on the global context and what you need really need.

The most simple solution is just to directly give the expected array to the component.

In the component code:

@Input()
myList: any[];

In the template:

*ngFor="let listItem of myList"

But if you really need it to work as mention it in you question, just use a method. Of course, you will need to pass a dictionary (or map) of arrays indexed by their name.

In the component code:

@Input()
myLists: {[name: string]: any[]}; // dictionary of arrays indexed by name

getList(name: string): any[] {
   return this.myLists[name];
}

In the template:

*ngFor="let listItem of getList('the name I want')"

Edit

From what I see in your question since you edited I can give you an answer that is closer to what you expect.

In the component code:

get selectedList(n): any[] {
   return this[this.listName];
}

In the template:

*ngFor="let listItem of selectedList"

edited Jun 5, 2019 at 8:56

answered Jun 5, 2019 at 8:04

C.Champagne

5,5492 gold badges25 silver badges39 bronze badges

1 Comment

glng Over a year ago

I have updated my code example for more info about my question. If you can please refer to it in your example it'll be great.

Collectives™ on Stack Overflow

Angular 6+: Pass array name in ngFor from @input

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related