Skip to content

Styles are not updated correctly after image loaded by NgOptimizedImage (with OnPush Change Detection) #54478

@daryakalenik

Description

@daryakalenik

Which @angular/* package(s) are the source of the bug?

common

Description

New placeholder attribute of NgOptimizedImage doesn't seem to properly update styles in components with changeDetection: ChangeDetectionStrategy.OnPush after image is loaded. After loading the image directive should remove blur and other styles (background-image, background size, etc...) but it's not happening - if I remove changeDetection: ChangeDetectionStrategy.OnPush it starts working as intended. If directive is used without blur it doesnt affect the visual part, but placeholder styles are still there until change detection (for example in my original project image has an action on click - and click action leads to styles update)

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-xfrx6r?file=src%2Fimage.component.ts

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.0
Node: 20.10.0
Package Manager: npm 10.2.3
OS: win32 x64

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions