Angular6 how to keep adding dropdown with selected values

Question

Beginner here...user can select filter values from drop down .Each selection should add a new drop down with selected value..intention is user can edit the selection the way they want and select as many filter they want...how to implement this in angular 6?any pointers..thanks for help..

kind of like this- plnkr.co/edit/gdiuPCxHHopb15kcSAZH?p=preview..but i need the values in the drop down populated with selected value..also the first selection is also from a drop down — learnerjaz

AmiLinn AmiLinn · Accepted Answer · 2018-07-14T05:36:09

Please check this, I done this from an assumption. I think you can reach your need by using this code.

html

<div>    
    <div id="AddItem">
         <h2>Add State/City</h2>
          <select [(ngModel)]="dataDetails" (change)="addData("")">
            <option value="">-- choose an item --</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>
    </div>    
<div *ngFor="let item of items;">
    <select [(ngModel)]="selectedData" (change)="addData(item.name)">
        <option value="item.name">{{item.name}}</option>
    </select> 
</div>
<div>
      {{a}}
      a: <input [(ngModel)]="a" ng-change="changeData()" />
      b: <input [(ngModel)]="b" />
    </div>

</div>

js

 items:any = [];

addData(data=""){
  if(this.dataDetails || data){
    if(!data)
      data = this.dataDetails;
      this.items.push({
        name: data
      });
   }
}

Angular6 how to keep adding dropdown with selected values

1 Answers