angular signal is not recomputing

I have this code in my constructor

public constructor() {
this.dropdown = signal([
{
name: 'Normal Text',
tag: 'p',
selected: true
},
{
name: 'Heading 1',
tag: 'h1',
selected: false,
},
{
name: 'Heading 2',
tag: 'h2',
selected: false
},
{
name: 'Heading 3',
tag: 'h3',
selected: false
},
{
name: 'Heading 4',
tag: 'h4',
selected: false
},
{
name: 'Heading 5',
tag: 'h5',
selected: false
},
{
name: 'Heading 6',
tag: 'h6',
selected: false
}
]);

this.selectedTextType = computed(() => this.dropdown().find(x => x.selected) as DropdownOption);
}


and when an option is clicked from the dropdown this code is executed

public textTypeChange(option: DropdownOption, e: Event): void {
e.preventDefault();

this.selectedTextType().selected = false;
option.selected = true;
}


The selectedTextType signal does not get recomputed. The dropdown option does not change in the html. What am I doing wrong?

Continue reading...