angular: 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

image

πŸ”₯ 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

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 image

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 20 (11 by maintainers)

Most upvoted comments

Looking some more…

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.