Dynamic HTML content with iframes inside gridster widgets ... iframe refreshes continuously

[rajasekar-pb]

<gridster #gridster [options]="options">
	<gridster-item [item]="item" *ngFor="let item of dashboardService.dashboardWidgets; let i = index;">

		<!-- This is working fine -->
		<iframe src="http://www.google.com" style="height:200px;width:300px;" title="Iframe Example"></iframe>

		<!-- This is not working -->
		<!-- The same iframe is stored as HTML code in database and retrieved via function call -->
		<div [innerHtml]="sharedService.sanitizeHtml(item?.notes)"></div>

	</gridster-item>
</gridster>

Current behavior The dynamically loaded iframe via InnerHtml refreshes continuously whenever mouseenter, mouseleave and focus on widget ...

Expected behavior The dynamically loaded iframe should not refreshes after initial load ...

Environment:

• Angular version: 12.2.1
• Gridster2 version: 12.0.0
• Browser: Chrome Version 92.0.4515.159 (Official Build) (64-bit)
• Language: TypeScript 4.3.5
• Node: 14.17.0

[LJoonas]

I think I had a similar problem, caused by gridster-items being needlessly re-rendered on every change detection cycle. I added a "trackBy" to the *ngFor that I was using to render the gridster-items and tracked by my collections 'id'

[rajasekar-pb]

@tiberiuzuld is there any solution available, yet??...