How can we do default selection from select using Angular 6?

Question

I have to use the drop down for a field named "reportType". I extracted the value from API as Reportformdetails.reportType.

The Reportformdetails.reportType contains two values, such as A and B

I used the below code:

    <select  class="form-control"  name="reportType"  #reportType="ngModel" ngModel
            [(ngModel)]="Reportformdetails.reportType" (change)="selectInput($event)" >
        <option [value]="undefined"> Select </option>
        <option [value]="x.value" *ngFor="let x of services" >{{x.name}}</option>
     </select>

Now when I see the dropdown, the value A has to be selected by default.

In normal HTML, I can use the selected attribute directly in option value. What do I do here?

Use null instead of undefined, and set the default value of Reportformdetails.reportType to null — Elias Soares, Jan 04 '20 at 10:52

score 1 · Answer 1 · answered Jan 04 '20 at 10:52

1

Set Reportformdetails.reportType to A from ts

Try like this:

Reportformdetails.reportType= 'A'

Working Demo

answered Jan 04 '20 at 10:52

Adrita Sharma

21,581
10
69
79

How can we do default selection from select using Angular 6?

1 Answers1