Angular signal is not triggering change in the template

@Component({
selector: 'app-onb',
standalone: true,
imports: [],
templateUrl: './onb.component.html',
})
export class OnbComponent implements OnDestroy {
receivedData: any;
onbResponse = signal<any[]>([]);
private sseSubscription?: Subscription;

constructor(
private router: Router,
private onbService: OnbService,
) {
const navigation = this.router.getCurrentNavigation();
this.sseSubscription = this.onbService.run().subscribe({
next: (data) => {
this.onbResponse.update((values) => {
if (!values) {
return [data];
}
return [...values, data];
});
alert(this.onbResponse()); //this is updated correctly
},
error: (error) => {
console.error('Received SSE error:', error);
},
});
}
}


@if (onbResponse().length == 0) {
<p>loading</p>
} @else {
{{onbResponse()}}strong text
}


I am receiving some data using a service and sse. All this works since the code is triggered and the alert pops up.

The conditional rendering using signals and @if @else doesn't work.

Continue reading...