How to Update an Immutable Signal Object which is itself a AppComponent Property?

I am struggling with a simple plain object, which is itself a property of AppComponent. This object "x" is wrapped as a writable signal. I want to implement a method which updates the own property of the signal object "x".

Further the object "x" itself should be immutable.

Here is the code:

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
imports: [FormsModule],
template: `

<h1> {{title}}<h1>
<hr>
<p> Value of the X Property X: {{x().Value}} <p>
`,

styles: ['html { line-height: 1.15;} input{border: 0.1em solid lightgreen;}'],
})
export class AppComponent {
protected title = 'How to update an Immutable Signal Object which is itsels a AppComponent Proberty? ';

readonly x = signal<IVariableBuilder> ({
variableName: 'X',
Value: 0,
unit: ''
});

upDateMethod(){
this.x.update(f => f.Value= 1234 ) // Does not work
}
}

interface IVariableBuilder {
readonly variableName: string; // to get information, which variable was changed by <input>
readonly Value: number,
readonly unit: string;
}

bootstrapApplication(AppComponent);


Also refer to myStackbiltzCode

Continue reading...