mat-select change event not trigger in setvalue angular 13 reactive form

Question

Using the mat-select inside the form-group

<mat-form-field appearance="outline">
   <mat-select formControlName="formula" id="formula">
       <mat-option [value]="metricFormula.TotalCount">{{l('TotalCount')}}</mat-option>
       <mat-option [value]="metricFormula.Sum">{{l('Sum')}}</mat-option>
       <mat-option [value]="metricFormula.Average">{{l('Average')}}</mat-option>
       <mat-option [value]="metricFormula.Percentage">{{l('Percentage')}}</mat-option>
    </mat-select>
</mat-form-field>

In the ts file setting the value to form control formula , doesn't trigger the change event

 get f() { return this.formGroup.controls; }

 private formBuild(): void {
        this.f.formula.setValue(metricFormula.Average);
}

Change event code doesn't get called, however, works on manually selecting the value from list

onChanges(): void {
    this.f.formula?.valueChanges.subscribe(val => {
        console.log(val);
    });
}

ngOnInit(): void {
        this.formBuild();
        this.onChanges();
    }

Answer 1

I have to implement AfterViewInit and worked for me

    export class MetricConfigureComponent implements OnInit, AfterViewInit {
      ngAfterViewInit() {
        setTimeout(() => {
           this.f.formula.setValue(//Some value of that type);
        });
      }
    }