Change - angular - resovido

Tenho este componente

<div>
                                <div fxLayout="row" fxFlex="30" fxLayoutAlign="start start">
                                    <mat-form-field>
                                        <mat-label>{{ 'evento.tipo.evento' | translate }}</mat-label>
                                        <mat-select id="tipoEvento" formControlName="tipoEvento" name="tipoEvento"
                                            required (change)="tipoEvento($event)">
                                            <mat-option [value]="-0"></mat-option>
                                            <mat-option *ngFor="let tipoEvento of tipoEventos" [value]="tipoEvento.key">
                                                {{tipoEvento.descricao}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                            </div>

Que chama este evento (change)=“tipoEvento($event)” ao sair dele.

tipoEvento(event: Event): void {
    alert(11);
    this.carregarServicosEmpresa();
    this.carregarServicosFazenda();
  }

Mas não funciona.

Realmente selecionar um opção em um <mat-select> não dispara o evento (change). Para isso vc deve usar o evento (selectionChange). Por exemplo:

<mat-form-field>
  <mat-label>Faça sua escolha</mat-label>
  <mat-select (selectionChange)="onChange($event.value)">
    <mat-option value="1">Um</mat-option>
    <mat-option value="2">Dois</mat-option>
  </mat-select>
</mat-form-field>

Fonte: https://material.angular.io/components/select/api#MatSelect

2 curtidas

Valeu