core: async observable update not triggering change detection in ejs-grid e-column directive.

🐞 bug report

In angular 9, ngx-translate is not working as expected.

Is this a regression?

yes, working fine in angular 8

Description

while using ngx-translate to translate text, it return empty string as text but working fine in angular 8.

src\app\components\grid.component.html

<ejs-grid #grid [dataSource]="items" allowPaging="true" allowSorting="true" allowMultiSorting="true" (dataStateChange)="dataStateChange($event)" [locale]="locale" [pageSettings]="pageSettings">
    <e-columns>
      <e-column field="displayValue" headerText="{{'GRID.DISPLAYVALUE' | translate}}" width="80"></e-column>
      <e-column width="30" headerText="afaf" textAlign="center">
        <ng-template #template let-data>  
          <a (click)="delete(data.keyValue)">Delete</a>
        </ng-template>
      </e-column>
    </e-columns>
  </ejs-grid>

🔬 Minimal Reproduction

1.download below sample ngTranslateSampleIssue-712573671.zip

1. Give npm i
2. Then ng serve

you will see below in browser page. no header text

🔥 Exception or Error

headertext property has null value in component level hook.

🌍 Your Environment

Angular Version:

dependencies": {
    "@angular/animations": "9.0.4",
    "@angular/common": "9.0.4",
    "@angular/compiler": "9.0.4",
    "@angular/core": "9.0.4",
    "@angular/forms": "9.0.4",
    "@angular/platform-browser": "9.0.4",
    "@angular/platform-browser-dynamic": "9.0.4",
    "@angular/router": "9.0.4",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",

Anything else relevant? my component life cycle hooks gets triggered from angular core level, in there my header-text property alue is null when i use translate like below

<e-column field="displayValue" headerText="{{'GRID.DISPLAYVALUE' | translate}}" width="80"></e-column>

Refer below image

Declare below in component.ts file

public check : any= {check:'check1',check2:'check2'};

and declare like below <e-column field="displayValue" headerText="{{check.check}}" width="80"></e-column>

it return my header text vale like below

[petebacondarwin]

Looking some more…

[AndrewKushnir]

Hi @kumaresan-subramani, thanks for reporting the issue.

Could you please help create a minimum possible repro, so that it’s easier to debug? Ideally it should be a couple components with simple templates that contain only the content needed to repro the issue. Once the repro is ready, pleased create a Github repo with the demo app and we’ll perform additional investigation.

Thank you.