CODEWITHSUNDEEP
htmlangular
logger
logger

Reputation: 2053

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

I am trying to implement a select option for angular 5 with dynamic selection box depends on which backend component sends the selection.

enter image description here

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?

Upvotes: 3

Views: 1892

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73731

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>

Upvotes: 3

Related Questions