I made a diceComponent, where I can fill the number in the HTML file, then in the component it will fill a url to an img with the right kind of dots.

When I fill the number in the html file it works well. But then I fill the number from a variable fromn the .ts file then it does not work.

my dicecomponent .ts :

import { Component, Input, OnInit } from '@angular/core';
import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';

const strdiceOne : string = ".png"
const strdiceTwo : string = ".png"
const strdicThree : string = ".png"
const strdiceFour : string = ".png"
const strdiceFive : string = ".png"
const strdiceSix : string = ".png"
const strdDiceError : string = ".svg"

@Component({
  selector: 'app-dicebox',
  templateUrl: './diceboxponent.html',
  styleUrls: ['./diceboxponent.scss'],
  imports: [ IonItem, IonLabel, IonThumbnail ], 
})
export class DiceboxComponent  implements OnInit {
  private _diceVal : string = ''; 
  private _diceSrc : string = '';

  @Input() diceName : string = "Dice 1";

  @Input('diceVal') 
      get diceVal() : string { return this._diceVal ; }
      set diceVal(value : string) { this._diceVal = value }

   @Input('diceSrc') 
      get diceSrc() : string { return this._diceSrc; }
      set diceSrc(value : string) { this._diceSrc =  ( ( this._diceVal == "1") ? strdiceOne :  
                                                       ( this._diceVal == "2") ? strdiceTwo :   
                                                       ( this._diceVal == "3") ? strdicThree :   
                                                       ( this._diceVal == "4") ? strdiceFour :   
                                                       ( this._diceVal == "5") ? strdiceFive :   
                                                       ( this._diceVal == "6") ? strdiceSix :   
                                                       strdDiceError)  }
  
  constructor() { 
  }

  ngOnInit() {}

}

my dice component .html file:

<ion-item color="warning">
  <ion-label slot="start" [innerHTML]="diceName"></ion-label>
  <ion-thumbnail >
    <img [alt]="diceName" [src]="diceSrc"/>
  </ion-thumbnail>  
</ion-item>

The working dice in homepage .ts and homepage .html :

export class HomePage  implements OnInit {
  public button02Text : string = 'Dice 2: ';
// So I only fill diceName from code, but fill diceVal="3" directly in html.
---------

<app-dicebox #dice02 [diceName]="button02Text" diceVal="3" diceSrc="" />

But not working in homepage .ts and homepage .html :

export class HomePage  implements OnInit {
  public button01Text : string = 'Dice 1: ';
  public button01Value : string = '5';
// So I fill Both diceName and diceVal with variables from within the code .

---------------------
<app-dicebox #dice01 [diceName]="button01Text" [diceVal]="button01Value" diceSrc="" />

I use the diceVal to fill the URL to a dice, but this does not work from code. The following part does not work as far as I can see :

( this._diceVal == "5") ? strdiceFive : 

Instead the URL is filled with the fallback (strdDiceError).

Is there a way to enforce the parameter to refresh after changing it in code ?

I made a diceComponent, where I can fill the number in the HTML file, then in the component it will fill a url to an img with the right kind of dots.

When I fill the number in the html file it works well. But then I fill the number from a variable fromn the .ts file then it does not work.

my dicecomponent .ts :

import { Component, Input, OnInit } from '@angular/core';
import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular/standalone';

const strdiceOne : string = "https://cdn.pixabay/photo/2014/04/03/10/24/one-310338_640.png"
const strdiceTwo : string = "https://cdn.pixabay/photo/2013/07/12/17/39/dice-152174_640.png"
const strdicThree : string = "https://cdn.pixabay/photo/2014/04/03/11/56/dice-312624_640.png"
const strdiceFour : string = "https://cdn.pixabay/photo/2013/07/12/17/39/dice-152176_640.png"
const strdiceFive : string = "https://cdn.pixabay/photo/2014/04/03/10/24/five-310334_640.png"
const strdiceSix : string = "https://cdn.pixabay/photo/2013/07/12/17/39/dice-152178_640.png"
const strdDiceError : string = "https://ionicframework/docs/img/demos/thumbnail.svg"

@Component({
  selector: 'app-dicebox',
  templateUrl: './diceboxponent.html',
  styleUrls: ['./diceboxponent.scss'],
  imports: [ IonItem, IonLabel, IonThumbnail ], 
})
export class DiceboxComponent  implements OnInit {
  private _diceVal : string = ''; 
  private _diceSrc : string = '';

  @Input() diceName : string = "Dice 1";

  @Input('diceVal') 
      get diceVal() : string { return this._diceVal ; }
      set diceVal(value : string) { this._diceVal = value }

   @Input('diceSrc') 
      get diceSrc() : string { return this._diceSrc; }
      set diceSrc(value : string) { this._diceSrc =  ( ( this._diceVal == "1") ? strdiceOne :  
                                                       ( this._diceVal == "2") ? strdiceTwo :   
                                                       ( this._diceVal == "3") ? strdicThree :   
                                                       ( this._diceVal == "4") ? strdiceFour :   
                                                       ( this._diceVal == "5") ? strdiceFive :   
                                                       ( this._diceVal == "6") ? strdiceSix :   
                                                       strdDiceError)  }
  
  constructor() { 
  }

  ngOnInit() {}

}

my dice component .html file:

<ion-item color="warning">
  <ion-label slot="start" [innerHTML]="diceName"></ion-label>
  <ion-thumbnail >
    <img [alt]="diceName" [src]="diceSrc"/>
  </ion-thumbnail>  
</ion-item>

The working dice in homepage .ts and homepage .html :

export class HomePage  implements OnInit {
  public button02Text : string = 'Dice 2: ';
// So I only fill diceName from code, but fill diceVal="3" directly in html.
---------

<app-dicebox #dice02 [diceName]="button02Text" diceVal="3" diceSrc="" />

But not working in homepage .ts and homepage .html :

export class HomePage  implements OnInit {
  public button01Text : string = 'Dice 1: ';
  public button01Value : string = '5';
// So I fill Both diceName and diceVal with variables from within the code .

---------------------
<app-dicebox #dice01 [diceName]="button01Text" [diceVal]="button01Value" diceSrc="" />

I use the diceVal to fill the URL to a dice, but this does not work from code. The following part does not work as far as I can see :

( this._diceVal == "5") ? strdiceFive : 

Instead the URL is filled with the fallback (strdDiceError).

Is there a way to enforce the parameter to refresh after changing it in code ?

• angular
• ionic-framework
• ionic7

• 1 Oh do not recompute the value of sec. You may move you code from the sec setter to the value setter after the value is set. And remove the setter / input for source and call the getter. Many possibilities … but you need to call you logic with the value but not without – Thomas Renger Commented Mar 17 at 6:08

1 Answer 1

Well sometimes it happens that you did already had the answer, but not understand it. I was thinking about the problem (not behind my dev rig), and thought why I did add the diceSrc="" part to the code : in <app-dicebox ... /> In fact I had the same problem. So I changed the html-code to :

<app-dicebox #dice01 [diceName]="button01Text" [diceVal]="button01Value" [diceSrc]="buttonSourceEmpty" />

and I also added

public  buttonSourceEmpty : string = '';

So that was the solution for me, I do not understand it fully, but I found a path to get my code working.