How do signals work in Angular with Example

The following code:

required = computed(() => this.computeRequired(this.fields()));

private computeRequired(fields: FormField[]) {
console.log('Check fields:', fields);
// const req = signal<boolean>(false);
let req = false;
fields.forEach((field) => {
if (field.monkeyComp.state?.required) {
// req.set(true);
console.log(`TRUE`);
return true;
req = true;
}
});
// return req;
console.log(`req = ${req}`);
return req;
}


with this in the template:

@if (required()) {
<span class="form-required-note"> * Required </span>
}


does some pretty weird stuff?! As youcan see I've fiddled with a few small changes to see if helped.

The fields object is a signal input, and when this function runs, it's fully defined, and logs correctly. However, I get the cryptic log sequence:

TRUE
req = false


And the conditional element is in fact never shown in the DOM. There is some weirdness going on here that I don't understand!

Continue reading...