Angular project needs to empty click to update screen after getting data from service

Question

Angular project that gets Data from some services and makes some calculation with this data, then it shows in a component (Using Grid Component of the Syncfusion). When it comes to ngOnInit, data is loaded but it doesn't appear on page. Whenever I click to somewhere on screen it shows the data on page. I couldn't handle it, any suggestions ?

<ejs-grid #grid id='grid'[rowHeight]='30' (rowDataBound)="rowDataBound($event)" [dataSource]='XXX$ | async' [editSettings]='editSettings' (cellSaved)="dataChanged($event)" height="300px" style="color: red;">
            <e-columns>
                <e-column field='x1' [visible]="check[0]" headerText='x1' textAlign='center'  width=120></e-column>
                <e-column field='x2' [visible]="check[1]" headerText='x2' textAlign='center'  width=120></e-column>                    
                <e-column field='x3' [visible]="check[2]" headerText='x3' textAlign='center'  width=120></e-column>
            </e-columns>
</ejs-grid>

Binding dataSource property with an observable and passing data into this observable from an array with "of()" tag

XXX$!: Observable<XModel[]>;

this.XXX$= of(YYY);

Answer 1

Solved with changeDetectionRef.detectChanges().

import { ChangeDetectorRef } from '@angular/core';

Add into constructor from imports,

constructor(private ref: ChangeDetectorRef){}

Call detectChanges() where you need

this.ref.detectChanges();