I am facing a challenge with template rendering in Angular 6 and a library for creating floating panels called jsPanel 6, which is written in plain JavaScript. Essentially:
After my template is rendered, I have a BUTTON that triggers the following function:
public openPanel()
{
let list: Array<number> = [1, 2, 3];
let tag : string = '<ul> <li *ngFor="let i of list"> {{ i }} </ul>';
jsPanel.create({
theme: 'primary',
contentSize: {
width: function() { return Math.min(730, window.innerWidth*0.9);},
height: function() { return Math.min(400, window.innerHeight*0.5);}
},
position: 'center-top 0 250',
animateIn: 'jsPanelFadeIn',
headerTitle: 'I\'m a jsPanel',
content: tag,
onwindowresize: true
});
}
The issue here is that Angular fails to render the ngFor directive properly; it doesn't iterate through the loop or perform the `{{ i }}` interpolation. For context, I am using TypeScript.
Here is the result after clicking the button.
Is there a way, without utilizing Dynamic Component Loader, to achieve the desired rendering?
Thank you.