Q: ExpressionChangedAfterItHasBeenCheckedError: after modal rise and set property data I have a ngModal popup and a form with 3 controls on it. one of the controls is autocomplete;
am trying to fill data after the popup is opened. The point here is using angular material controls causes the exception to happen. when I remove the controls and open the popup every thing goes well.
here is the exact error

message: 'NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'mat-focused': 'false'. Current value: 'true'

while calling ngModal from the parent on button click is like this ;
 const modalRef = this.modalService.open(CoinInsertModalComponent);
modalRef.componentInstance.coinAdded.subscribe((val: boolean) => {
  if (val) {
  //  this.getCoins();
  }
});

and the modal HTML is;
    <form class="pt-3" #f="ngForm" [formGroup]="coinForum" (ngSubmit)="addCoin()">
  <div class="form-group">
    <mat-form-field>
      <mat-label>Coin</mat-label>
      <input type="text" placeholder="Coin Seç" aria-label="Number" matInput formControlName="coinSelectControl"
        [matAutocomplete]="auto">
      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async " [value]="option.pair">
          {{option.pair}}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
  <div class="form-group">

     <mat-form-field class="form-group">
      <mat-label>Alınan Mikdar</mat-label>
      <input formControlName="coinAmountControl" matInput placeholder="örn. 15.56" type="number">
    </mat-form-field>
  </div>
  <div class="form-group">
    <mat-form-field class="form-group">
      <mat-label>Alım Fiyatı</mat-label>
      <input formControlName="coinPriceControl" matInput placeholder="örn. 0.002346" type="number">
    </mat-form-field>
  </div>
  <div class="modal-footer">
    <button [disabled]="!f.valid" type="submit" class="btn btn-sm btn-success"><i
        class="fas fa-check"></i>Kaydet</button>
    <button class="btn btn-primary btn-sm" (click)="activeModal.dismiss('After Open')"><i
        class="fas fa-times"></i>İptal</button>

  </div>
</form>

and at the end the modal code is;
 constructor(public activeModal: NgbActiveModal, private http: HttpClient, private spinner: NgxSpinnerService,
private toaster: ToastrService, private cd: ChangeDetectorRef) {
this.coinForum = new FormGroup({
  coinSelectControl: new FormControl('', [Validators.required]),
  coinAmountControl: new FormControl('', [Validators.required]),
  coinPriceControl: new FormControl('', [Validators.required])
});

}
 ngOnInit(): void {
const pairs = localStorage.getItem('pairs');
if (pairs) {
  if (new Date((JSON.parse(pairs)).getTime).getDate() !== (new Date()).getDate()) {
    this.getPairs();
  } else {
    this.options = JSON.parse(pairs).pairs;
  }
} else {
  this.getPairs();
}
this.filteredOptions = this.coinForum.controls.coinSelectControl.valueChanges.pipe(
  startWith(''),
  map(value => this._filter(value))
);

}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter((option: any) => option.pair.toLowerCase().indexOf(filterValue) === 0);

}
if there is any extra information needed to solve this matter please write in the comment and I'll update the question directly.
thanks in advance for help

A: You need to manually let Angular know that something has changed on opening the popup modal.
Angular has a mechanism to hear about such changes. It is a ChangeDetectorRef service.
Use ChangeDetectorRef Service to detect new changes. Inject it in the constructor as below:
constructor (private cdRef: ChangeDetectorRef) {}

Detect the changes by this.cdRef.detectChanges() and that should do the trick for you.
