Angular6 how to keep adding dropdown with selected values - angular6

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..

Answer 1

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
});
}
}