ionic-framework: bug: v7, cannot pass dynamic label to form controls

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.