how to clear selected mat-select-CodePudding

I want to clear selected mat-select after selection after I emitted the selected value to the parent component.

Here is my code.

<mat-select
  (selectionChange)="selectEvent($event, InteractionEvent.ADD_ACTIVITY)"
  [(ngModel)]="activityType"
  [(value)]="activityType"
>
  <mat-option [value]="'GATHER'">{{ 'GATHER' | translate | async }}</mat-option>
  <mat-option [value]="'VOTE'">{{ 'VOTE' | translate | async }}</mat-option>
  <mat-option [value]="'RANK'">{{ 'RANK' | translate | async }}</mat-option>
  <mat-option [value]="'SCORE'">{{ 'SCORE' | translate | async }}</mat-option>
</mat-select>

selectEvent(event, type) {
  this.receiveEventOccur.emit({ event: event.value, type: type });
  this.activityType = '';
}

But it is not updating in the UI.

CodePudding user response：

activityType value is set after the selectionChange event is emitted, a quick fix would be to use a settimeout, which executes this.activityType = '' after activityType value is set

selectEvent(event, type) {
  this.receiveEventOccur.emit({ event: event.value, type: type });
  setTimeout(() => this.activityType = '')
}