How do I specify to my custom component where a value is displayed within a input message?

I am building a value selector component in ionic/angular however I have one issue with the message/title I am passing to the component. I would like to be able to specify where the currently selected value is displayed within the message.

I thought about passing some marker like %value% inside the message string to be processed by the component. However, there must be the more standard approach to handle this?

In the following snapshot I would like the <ion-badge> {{Value}} </ion-badge> displayed where the X is.

<div class="ValueSelector_Container">
    <div class="Message">
        <ion-label>{{Message}} <ion-badge> {{Value}} </ion-badge> </ion-label>
    </div>
    
    ...

Here is how I am invoking/hosting the current component. I will eventually handle the output of the actual selected value

 <ValueSelectorComp Message="Play X minutes before switching to bla bla" ></ValueSelectorComp>

I have added a code reproduction via stackblitz here it is

If you have a working fix/suggestion please fork and report the link. Thank you.

https://stackblitz.com/edit/ionic-fx1ktl?file=pages%2Fhome%2Fhome.ts

Ionic:

   Ionic CLI          : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 7.0.0, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

npm show ionic version
5.4.16
npm show cordova version
11.0.0
npm show angular version
1.8.2
show @angular/core version
13.1.1

Solution 1:

you can use content projection to pass data

<div class="ValueSelector_Container">
<div class="Message">
    <ng-content> <ng-content>
</div>

and in parent component

<ValueSelectorComp >
 <ion-label>Play <ion-badge> {{Value}} </ion-badge> minutes before 
  switching to bla bla  </ion-label>
 
</ValueSelectorComp>