Angular not loading the updated data after an API call

Your service is working correctly. The issue is related to async data rendering and missing imports in a standalone component.

There are two common problems in your code.

Data is loaded asynchronously

Angular renders the template before the HTTP request completes. At first, liste is undefined, so nothing is displayed.

Use *ngIf (or safe navigation) in the template to wait for the data.

<div *ngIf="liste"> <pre>{{ liste | json }}</pre> </div>

Or if liste is an array:

<ul *ngIf="liste"> <li *ngFor="let item of liste"> {{ item | json }} </li> </ul>

Missing CommonModule import (standalone component)

Since this is a standalone component, Angular directives like *ngIf and *ngFor are not available by default.

You must import CommonModule.

@Component({ selector: 'app-reclamer', standalone: true, imports: [CommonModule, JsonPipe], templateUrl: './liste-reclamation.html', styleUrl: './liste-reclamation.css', })

After adding CommonModule and guarding the template, the data will render correctly.