but(FormFiled): Floating label hide/show not responsive when set to outline appearance.

[Cole-Jaeger]

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 you have a mat form field and the mat-label is conditional. If the view starts with the label and gets remove with @if in template it is perfectly fine. Will disappear and reappear. If the view starts with-out the mat label rendered, the label will get rendered but the component, 'MatFormFieldNotchedOutline" still has the class, 'mdc-notched-outline--no-label', so the display is set to none.

Looks as though if the mat-label is not there on view init it is not responsive.

The behavior works fine with fill appearance.

Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

Expected Behavior

When mat-label gets rendered in even after init, i.e. Using a structural directive or decorator such *ngIf or @if. The label should show no matter the appearance.

Actual Behavior

When you have the appearance set to outline and the view is initially rendered without the label it is not responsive and will not show up.

Environment

• Angular: 18.2.10
• CDK/Material: 18.2.10
• Browser(s): Edge, Chrom
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[Totati]

Duplicate of #26579

[Cole-Jaeger]

I don't think this is a duplicate of that other bug. That one is only happening on fill appearance while this is happening on the outline appearance. This is a specific issue of what it seems like is in the "ngAfterViewInit" in the MatFormFieldNotchedOutline component. A component that does not even get added when appearance is set to fill.

[amysorto]

Hi @Cole-Jaeger, can you provide a StackBlitz with the issue reproduced. This is the template for it: https://stackblitz.com/fork/components-issue-starter

[Cole-Jaeger]

Absolutely @amysorto !
https://stackblitz.com/edit/components-issue-starter-gjragy?file=src%2Fmain.ts

This is a super simple example in my app the "showLabel" is based off of a media break point but this example just uses a simple toggle.

Please let me know if you need anything else

Thank you.

[amysorto]

@Cole-Jaeger thanks for the link, I am able to reproduce the issue

[vladsadretdinov]

Bug still exists in 19 version too.

"@angular/cdk": "19.0.4",
"@angular/material": "19.0.4",

As temporary solution we use this approach (@Cole-Jaeger maybe you are interested in this)

<mat-form-field 
    appearance=outline 
    [ngClass]="{'mdc-notched-outline--no-label': !showLabel}"
>
    <mat-label>
        value
    </mat-label>

    <input matInput/>
</mat-form-field>