Reputation: 5889
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
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