bug: v7, cannot pass dynamic label to form controls

[judsonmusic]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Upgraded to IONIC 7 RC a couple of day ago. I got all of the warnings about the ion label being deprected and needing to replace with label="something" labelPlacement="stacked" etc...

I have a reusable component in which i am passing the label via attribute like so:
<app-frequency-select controlName="medfrequency" label="When will this be taken?" [required]="true"></app-frequency-select>

Inside the component you see i'm trying to pass an input to customize the value of the select.
HTML:

<ion-item>
  <ion-select
    required
    [label]="label"
    labelPlacement="stacked"
    #frequencySelect
    [formControlName]="controlName"
    placeholder="Please Select"
  >
    <ion-select-option [value]="f.frequencyid" *ngFor="let f of frequencies">{{ f.frequency }}</ion-select-option>
  </ion-select>
</ion-item>

component.ts:

@Component({
  selector: 'app-frequency-select',
  standalone: true,
  templateUrl: './frequency-select.component.html',
  styleUrls: ['./frequency-select.component.scss'],
  imports: [CommonModule, IonicModule, FormsModule, ReactiveFormsModule, RequiredDirective, SelectLabelFixDirective],
  viewProviders: [
    {
      provide: ControlContainer,
      useFactory: (container: ControlContainer) => container,
      deps: [[new SkipSelf(), ControlContainer]]
    }
  ]
})
export class FrequencySelectComponent {
  @ViewChild('frequencySelect') fs: IonSelect;
  @Input() label: string;
  @Input() required: boolean = false;
  @Input() controlName: string;
  frequencies: any[] = [];
  disabled: boolean;

  constructor(private _referenceService: ReferenceService) {}

  async ngOnInit() {
    await this.buildReferences();
    console.log('The label for FS:', this.label); //this is coming through just fine..
  }
  async buildReferences() {
    const t = setTimeout(async () => {
      this.frequencies = await lastValueFrom(this._referenceService.getFrequencies());
      clearTimeout(t);
    }, 1000);
  }
}

As you can see in my comment the label comes through just fine but when i try to render it into [label]="label"
it does not work. No label gets rendered.

I am forced for the time being to put static text like label="something" which works.

Expected Behavior

I should be able to pass a string to the label in my reusable component and the [label] attribute render the text that I have sent as an @input() label;

Steps to Reproduce

Create and input and try passing dynamic text to the label with brackets like so
<ion-input [label]="somevariableforlabel"></ion-input>

in the component file:

public somevariableforlabel = 'My label';

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.0.0 (/Users/abcd/.nvm/versions/node/v16.18.0/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 15.2.4
@angular-devkit/schematics : 15.2.4
@angular/cli : 15.2.4
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : 4.6.1
@capacitor/core : 4.6.1
@capacitor/ios : 4.6.1

Utility:

cordova-res : 0.15.4
native-run (update available: 1.7.2) : 1.7.1

System:

NodeJS : v16.18.0 (/Users/abcd/.nvm/versions/node/v16.18.0/bin/node)
npm : 9.6.2
OS : macOS Unknown

Additional Information

Let me know if you need anymore information. Thank you.

[judsonmusic]

I have created a stackblitz to show the issue on both parent and child:
https://stackblitz.com/edit/ionic7-label-test?file=src/app/app.component.ts
Notice initially it might work with dynamic label but change some label text in the ts files and it breaks.
Also despite having the correct [label] attr. getting this in the console:

However you can see my code is correct:

If i refresh the page they seem to work, but they do not work in my application when entering into new views etc.

[JustinPierce]

I would add that I have noticed this behavior with any Ionic component that I've tried to set a dynamic label on, and not just <ion-input>. All of our labels are run through an i18n package, so dynamic labels are non-negotiable for us.

[muuvmuuv]

Also noticed that the shadow-root changes on navigation/re-hydration. Our label just prints fine but when navigating its gone. And we do not use the [legacy]="true" attr.