How can we create multiple dynamic drop down using *ngFor loop angular 5

Question

I have a list of dropdown and i am creating DOM structure using Angule5 like

<div *ngFor="let dropdownof ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" value={{option .id}} required>{{option .value}}</option>
</select>
</div>

in .ts file i have 3 backend services for list of option. and one services for no of dropdown

 public getCountry(){//some logic} 
 public gettype(){//some logic}
 public getlang(){//some logic}

 public getDropdownList(){//some logic}

now the problem is its creating 3 dropdown but option is repeating, only getlang is showing in all list!!! please help

Your should have different collection of data for all ddl not single like -ListOfDropdown — MukulSharma
– MukulSharma, Commented Jun 27, 2018 at 14:01
You've also missed of in *ngFor="let dropdownof of ListOfDropdown" — P.S.
– P.S., Commented Jun 27, 2018 at 14:03
yes I agree with you but the problem is, dropdown is creating in for loop so how can i provide the different collection of data — user3364549
– user3364549, Commented Jun 27, 2018 at 14:11

rafaelwalter · Accepted Answer · 2018-06-27 14:16:57Z

1

for each dropdown it should have a collection of data. you could have something like:

        private countries: any[];
        private types: any[];
        private langs: any[];

        public dropDowns: any[] = [
              { data: countries },
              { data: types },
              { data: langs },
        ];

and in the template:

        <div *ngFor="let dropDown of dropDowns" class="md-form form-lg">
         <select name="function">
          <option *ngFor="let option of dropDown.data" value={{option .id}} required>{{option .value}}</option>
         </select>
        </div>

with this you have an array on dropdowns and each have an array of data. then the template must only display the property dropDown.data of each element on the dropDown array

answered Jun 27, 2018 at 14:16

rafaelwalter

1364 bronze badges

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

Comments

Krishna Rathore · Accepted Answer · 2018-06-27 14:04:58Z

0

you can try with this solution

put proper synax of *ngFor="let dropdown of ListOfDropdown" and [value]="option.id"

<div *ngFor="let dropdown of ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" [value]="option.id" required>{{option .value}}</option>
</select>
</div>

answered Jun 27, 2018 at 14:04

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Collectives™ on Stack Overflow

How can we create multiple dynamic drop down using *ngFor loop angular 5

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related