*ngFor dynamic string interpolation with array

Question

Actually i have the situation that i want to change the array looping dynamically.

export interface City { 
   street: Street[];
   country: Country[];
}

<div>
    <div (click)="OnClick()">Street</div>
    <div (click)="OnClick()">Country</div>
</div>

<div *ngIf="clicked">       
         <div *ngFor="let c of city.street">    
              <div>
                {{c.name}}          
              </div>        
         </div>  
</div>

If the User click on Street, the Values of the street should loop.

expected: *ngFor="let c of city.street"

If the user click on country, the values of the country should loop.

expected: *ngFor="let c of city.country"

I have tried the following:

<div>
    <div (click)="OnClick('street')">Street</div>
    <div (click)="OnClick('country')">Country</div>
</div>

<div *ngIf="clicked">       
         //Porperty Binding
         <div *ngFor="let c of city.{{onClickParameter}}">  
              <div>
                {{c.name}}          
              </div>        
         </div>  
</div>

It doenst work ( Template Parse Error because city.{{}} ) Is thereother solutions ?

ranakrunal9 · Accepted Answer · 2016-11-09 10:44:53Z

4

You can use component function to handle it:

//Component
export interface City { 
 street: Street[];
 country: Country[];
}

export class MyComponent {
  public selected : string = 'street';
  public city: City;

  OnClick(select: string) {
    this.selected = select;
  }

}

// You HTML

<div>
  <div (click)="OnClick('street')">Street</div>
  <div (click)="OnClick('country')">Country</div>
</div>

<div *ngIf="clicked">       
  <div *ngFor="let c of city[selected]">  
    <div>{{c.name}}</div>
  </div>  
</div>

answered Nov 9, 2016 at 10:44

ranakrunal9

13.6k3 gold badges44 silver badges43 bronze badges

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

1 Comment

jonrsharpe Over a year ago

You could simplify the template further by moving city[selected] into the class using e.g. a property get listOfThings() { return this.city[this.selected]; }

Collectives™ on Stack Overflow

*ngFor dynamic string interpolation with array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related