input-group - Label is on top of the placeholder

[desig9stein]

Description

Binding a dynamic value to the native input's placeholder within the igx-input-group does not trigger change detection. As a result, the igx-input-group fails to update or adjust its classes dynamically, leading to incorrect or missing styling updates.

This is true for the textarea as well

• igniteui-angular version:
• browser: all

Steps to reproduce

Bind to the native input placeholder
for example

[attr.placeholder]="properties.placeholder"

Result

The label goes on top of the placeholder

Expected result

The label should be on top of the placeholder like it is when the input has an actual value

Possible solutions

.TS - The cases igx-input-group--placeholder should be dynamically added/removed
.CSS - Another possible solution is to use a :placeholder-shown selector.

Attachments

Screen.Recording.2024-12-05.at.17.35.08.mov