Ionics 7/8: How to change component property value, from 'code behind' with getter in...

I made a diceComponent, where I can fill the number in the HTML file, then in the component I search a 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.com/photo/2014/04/03/10/24/one-310338_640.png"
const strdiceTwo : string = "https://cdn.pixabay.com/photo/2013/07/12/17/39/dice-152174_640.png"
const strdicThree : string = "https://cdn.pixabay.com/photo/2014/04/03/11/56/dice-312624_640.png"
const strdiceFour : string = "https://cdn.pixabay.com/photo/2013/07/12/17/39/dice-152176_640.png"
const strdiceFive : string = "https://cdn.pixabay.com/photo/2014/04/03/10/24/five-310334_640.png"
const strdiceSix : string = "https://cdn.pixabay.com/photo/2013/07/12/17/39/dice-152178_640.png"
const strdDiceError : string = "https://ionicframework.com/docs/img/demos/thumbnail.svg"

@Component({
selector: 'app-dicebox',
templateUrl: './dicebox.component.html',
styleUrls: ['./dicebox.component.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 dicenamer 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 ?

Continue reading...