CODEWITHSUNDEEP
angularviewchild
Jmainol
Jmainol

Reputation: 437

Angular 10, how to access to <mat-select> value?

I'm trying to access to a value I mean the current value of the select. I'm using a @ViewChild decorator, the object retrieved is huge and after search on it I can not find the value data. I´m using the local reference #type on because placing it on retrieves undefined.

<mat-form-field class="input-group">
      <mat-select #type placeholder="{{ 'request.detail.ticketTypes' | translate }}" 
         formControlName="ticketTypes" required>
        <mat-option *ngFor="let ticketType of ticketTypesQuery.list$ | async" 
           [value]="ticketType.id">
          {{ticketType.name}}
        </mat-option>
      </mat-select>
 </mat-form-field>

Here the .ts file code

@ViewChild('type', {static: true}) typeSelect;

ngOnInit() {
console.log(this.typeSelect) 
}

Upvotes: 0

Views: 1786

Answers (2)

Lokesh Daiya
Lokesh Daiya

Reputation: 879

In HTML you can add code as below

<mat-select [(value)]="dropownValue">

</mat-select>

When you change dropdown value it will be available in dropownValue.

Upvotes: 0

Panagiotis Bougioukos
Panagiotis Bougioukos

Reputation: 18949

No need to do that. The selected value will be the actual value of the form control.

this.myFormName.controls['ticketTypes'].value;

Just correct myFormName with how your form is declared in .ts file

Upvotes: 1

Related Questions