Templates not working with interpolation

[Jatinder]

Hey
Trying to use the dropdown list. But i cant get interpolation working with templates.

Basically your demo code:

public data: { [key: string]: Object }[] = [

        { Name: 'Andrew Fuller', Eimg: '7', Designation: 'Team Lead', Country: 'England' },

        { Name: 'Anne Dodsworth', Eimg: '1', Designation: 'Developer', Country: 'USA' }

    ];

    public fields: Object = { text: 'Name', value: 'Eimg' };

<ejs-dropdownlist id='employees' [dataSource]='data' [fields]='fields' [itemTemplate]="itemTemplate">

<ng-template #itemTemplate let-data>

        <div><div class="ename"> {{data.Name}} </div></div>

</ng-template>  

</ejs-dropdownlist>

----------------
- With the above dropdown opens but all the items are empty 

- If i add <div><div class="ename"> {{data.Name}} </div> <span>TEST HERE</span></div>, it will render the "TEST HERE" only (interpolation is empty)
- if i remove the item template, and make the data to a list of string, it renders fine
- seems like the interpolation is messed up, or the let variable is not being set


These are the current imported modules
[ButtonModule, DropDownListModule, DialogModule, AccordionModule, TooltipModule, DatePickerModule, UploaderModule];
These are the the npm package imports

"@syncfusion/ej2-angular-buttons": "~16.3.21",

"@syncfusion/ej2-angular-dropdowns": "~16.3.21",

"@syncfusion/ej2-angular-navigations": "~16.3.21",

"@syncfusion/ej2-angular-popups": "~16.3.21",

"@syncfusion/ej2-angular-calendars": "~16.3.21",

"@syncfusion/ej2-angular-inputs": "~16.3.21",

[Prince Oliver]

Hi Jatinder, 

Thank you for using Syncfusion products. 

We have checked the shared code snippet and prepared a sample to replicate the reported issue in our end. But unfortunately we were unable to replicate the issue in our end. The templates are working fine with interpolation. We have attached the sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-srqzhx  

Kindly refer to the above sample and let us know the steps to replicate the issue or kindly modify the above sample to replicate the issue and send it back to us. It will help us isolate the root cause and provide you solution at the earliest 

Regards, 

Prince 

[Jatinder]

Yes you're example works which is almost identical to what i am doing.

I found the culprit - my component is decorated with changeDetection: ChangeDetectionStrategy.OnPush.

Interpolation doesnt work in templates when such is the case.

Add changedetection strategy to your slackblitz sample and it should behave the same.

I can get around the following templates by:
- itemTemplate: calling markForCheck on the DataBound event
- valueTemplate: calling markForCheck on the Select event.

Let me know if there is another way around it....

This seems very dirty on my end, it should really be a fix on your library.

[Prince Oliver]

Hi Jatinder, 

Thank you for your update. 

We have checked the reported scenario in our end, based on the shared information. You can resolve issue in your end by calling the detecChanges function in the ChangeDetector. Kindly refer to the following code snippet. 

constructor(private det: ChangeDetectorRef ) {} 

 

onOpen() { 

    this.det.detectChanges(); 

} 

We have attached the modified sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-234dlf  

Regards, 

Prince 

[Jatinder]

What about [valueTemplate]?

Also, is this something you plan to address on your end? or is this the only final solution going forward?

[Prince Oliver]

Hi Jatinder, 

Thank you for your update. 

Yes, we have planned to fix this in our end. This will be fixed and included in our upcoming patch releases. 

Regards, 

Prince 

[Jatinder]

Hey 

Any idea to which release this will be addressed?
Anyways i am having more issues with dropdownlist + valueTemplate + onPush + reactive forms.

https://stackblitz.com/edit/angular-vwfmit

Take a look at the blitz above; it is a simplified form of the bug in our app.

Steps:
Click on Button "Obj1" --- All good
Click on Button "Obj2" ---- All good
Click on Button "Obj3" ----- All good

Click on Button "Obj3'" ----- All good

BUT when you go between Obj3 and Obj3' the value template does not get computed (because they have same value for the formcontrol) and goes blank for the interpolation.
Seems that when the form control value is the same, databound event is not fired and i cant get around the onPush 

[Prince Oliver]

Hi Jatinder, 

Thank you for your update. 

We are preventing control updating when the same value updated again and again, to avoid the performance leak. So we need more details on your scenario where you required to update the control with same value. It will help us investigate further and provide solution. 

Regards, 

Prince 

[Jatinder]

Hey Prince

The use case is exactly as in the stackblitz.

Master -> detail.

Where the 2 or more items in the master could have the same value for the property in the detail screen.

e.g {name:"Prince", status: "pending, ..... } and {name:"Jatinder', status: "pending"....}

I understand that you dont want to keep updating the view value when underlying value is the same for perf.
But if you see the stackblitz - the view value (valuetemplate) goes blank - that is the problem when the value is same.

[Prince Oliver]

Hi Jatinder, 

Thank you for your update. 

We have validated the reported scenario in our end and considered this as a bug. The fix for the issue will be available in our upcoming patch release. 

Regards, 

Prince 

[Jatinder]

@Prince

Was this fixed? 

What version was this patched in?

[Prince Oliver]

Hi Jatinder, 

This was fixed in the version 16.3.33. We suggest you upgrade to the latest version in your end. Please let us know if you need any further assistance. 

Regards, 

Prince