Menu
I am trying to implement a select option for angular 5 with dynamic selection box depends on which backend component sends the selection.
Please note that both of the selectBox are the same box just the value inside of the option changes.
selector.html
<html>
...
<select>
<option *ngFor="let selectorA in selectorAs">{{selectorAs}}</option>
</select>
...
selector.ts
import{component} from '@angular/core'
@component({
selector: 'app-root'
templateUrl: './selector.html'
styleUrl: './selector.css'
})
export class AppComponent{
title = 'app';
selectorAs = ["option 1", "option 2", "option 3"];
selectorBs = ["option A", "option B", "option C"];
So my question is how do i make the select option dynamic to choose selectorBs instead of selectorAs based on the flag it passes in?
540
You can define a variable that points to the current list of choices:
export class AppComponent{
choicesA = ["option 1", "option 2", "option 3"];
choicesB = ["option A", "option B", "option C"];
currentChoiceList: string[];
processBackendData() {
this.currentChoiceList = condition ? this.choicesA : this.choicesB;
}
}
and use it in the template:
<select>
<option *ngFor="let choice of currentChoiceList">{{choice}}</option>
</select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
