ackuser
ackuser

Reputation: 5889

Interpolation and template expression inside *ngFor or *ngIf?

I am having some issues when I try to attempt to interpolate some variables inside ngFor or ngIf.

The components that I have are quite dynamic and also its functionality so I need to do this kind of thing and I am pretty sure it is possible.

Summarizing, I want to do somehting like that

*ngFor="let option of 'option_'{{dynamic_var}}" 

I would be really appreciated if someone can help me.

Many thanks

Upvotes: 1

Views: 1262

Answers (1)

Pete
Pete

Reputation: 794

If you need to prepend a string before each value, why not create a get method in your template to map the values?

Template:

<div>
    <h2>Mapped Values</h2>
    <p *ngFor="let map of getValues()">
        {{map}}
    </p>
</div>

Component:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';

  values = ['OneValue', 'ThreeValue', 'TwoValue'];

  constructor() {

  }

  public getValues() {
    let mappedValues = this.values.map(el => 'option_' + el);
    console.log(mappedValues);
    return mappedValues;
  }
}

Here is a StackBlitz: https://stackblitz.com/edit/angular-kw8x9x

Upvotes: 1

Related Questions