bug(material/form-field): hiding a label after it has been shown leaves a blank space

[GeorgianStan]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When the mat-label tag is removed from a mat-form-field a white gap remains visible.

<mat-form-field appearance="outline">
  @if (hasLabel$ | async){
    <mat-label>My input</mat-label>
  }
  <input matInput type="text" [(ngModel)]="name" />
</mat-form-field>

export class App {
  hasLabel$ = new BehaviorSubject(true);
  name = '';

  ngOnInit() {
    setTimeout(() => {
      this.hasLabel$.next(false);
    }, 3000);
  }
}

Reproduction

StackBlitz link

Expected Behavior

If hasLabel$ has a default value of false hasLabel$ = new BehaviorSubject(false); and mat-label is hidden from the start, it works as it should, but I would expect it to work as well if the label is removed later.

Actual Behavior

The blank space remains visible.

Environment

• Angular: 18
• CDK/Material: 18

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}