How to dynamically select drop-down lists in angular 5?

Question

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?

Martin Parenteau · Accepted Answer · 2018-08-07 00:37:10Z

3

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>

answered Aug 7, 2018 at 0:37

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically select drop-down lists in angular 5?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related