CODEWITHSUNDEEP
angulardropdown
Naila
Naila

Reputation: 280

Angular2 dropdowns selection in a loop

I have two arrays serviceOptions and reactivePackages. Against each service Options there is an array of reactive packages (Shown in dropdown list).

Now I am dynamically creating dropdowns in a loop. My issue is how to get the selected options of dropdowns on form submission ? (It's a part of form)

 <label *ngFor="let service of serviceOptions">
    <b>{{service.serviceName}}</b>
    <br /><br />
    <md-select placeholder="Select Package" formControlName="packageName" size="30">
      <ng-container *ngFor="let package of (reactivePackages | async)">
        <md-option *ngIf="service.serviceId==package.serviceId" [value]="package" (click)="hello()">
          {{ package.packageName }}
        </md-option>
      </ng-container>
    </md-select>
    <br />  <br />
  </label>

Upvotes: 0

Views: 1302

Answers (1)

Kamaal
Kamaal

Reputation: 61

    You can achieve it by saving the selected option in a variable. 

    You need to follow just two steps.
    1. Create a method on component.ts that will store the selected option.
    Example- 

      selectedData(event: any) {
       this.storedData = event.target.value;
      }

    2. Call this method on html.
    Example-

 <select class="form-control" (change)="selectedData($event)">
 <option *ngIf="service.serviceId==package.serviceId" [value]="package">{{ package.packageName }}</option>
</select>

3.Then simply call a method that will save the selected data.

Upvotes: 1

Related Questions