Search code examples
angulartypescriptionic3

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>
    
    ...

enter image description here

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

enter image description here

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

  • It works for me

    home.html

    <ValueSelectorComp
    Message="Play {{Value}} minutes before switching to bla bla"
    (MessageValue)="valueHandler($event)"
  ></ValueSelectorComp>

    home.ts

    Value: number;
valueHandler(val: number) {
    this.Value = val;
  }

    ValueSelectorComp.html

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

    ValueSelectorComp.ts

    ngOnInit() {
    this.MessageValue.emit(this.Value);
  }
 @Output() MessageValue: EventEmitter<number> = new EventEmitter();

    link: stackblitz.com/edit/ionic-dvsqjg?file=pages/home/home.ts