CODEWITHSUNDEEP
angularangular-material
SGR
SGR

Reputation: 2427

To set the default value in the dropdown in angular 6

I have component called list where i am displaying all my customers from an api in the dropdown as in below pic:

enter image description here

How can i set 1st customer as default ? like this:

enter image description here

DEMO

Upvotes: 0

Views: 1079

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39482

Just add this:

selectedCustomer = '01';

And in template use [(ngModel)]:

<div class="main-div">
  <h3>List</h3>
  <mat-form-field>
    <mat-select 
      placeholder="Select Customer" 
      [(ngModel)]="selectedCustomer">
      <mat-option 
        *ngFor="let customer of customers" 
        [value]="customer.id" 
        (click)="selected($event, customer.id)">
        {{customer.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Here's a Working Sample StackBlitz for your ref.

Upvotes: 2

Related Questions