Angular 18 httpClient service result display on template

I am new to Angular and missing something here. Ive set up a component to make a post request using a service following the docs and some help from a previous post here Now I am missing how to pass the results out to the template

My component:

@Component({
selector: 'app-order-validation',
standalone: true,
imports: [FormsModule, AsyncPipe, MatProgressSpinnerModule, MatToolbar, CommonModule],
templateUrl: './order-validation.component.html',
styleUrl: './order-validation.component.css'
})
export class OrderValidationComponent {
private readonly orderService = inject(OrderValidationService)
private _snackBar = inject(MatSnackBar)
showSpinner = signal(false)

OrderValidations: OrderValidation[] = [];

getOrderByNumber(orderNumber: string) {
this.showSpinner.set(true);
this.orderService.getOrderByNumber(orderNumber).subscribe({
next: (response) => {
this.OrderValidations = response,
this.showSpinner.set(false);
},
error: (err) => {
console.log(err);
},
complete: () => console.info("Component getOrderByNumber: complete")
});
}
}


My Service:

@Injectable({
providedIn: 'root'
})
export class OrderValidationService {
private http = inject(HttpClient);
private OrderValidations = signal<OrderValidation[]>([])
private url = environment.url;

getOrderByNumber(orderNumber: string): Observable<OrderValidation[]> {
orderNumber = orderNumber.trim();
const options = orderNumber ? { params: new HttpParams().set('orderNumber', orderNumber) } : {};

return this.http.post<OrderValidation[]>(this.url + environment.getOrderByNumber, options).pipe(
retry(3)
);
}
}


My interface file

export interface OrderValidation {
orderId: string;
orderNumber: string;
contactId: string;
contactEmail: string;
code: number;
dategen: Date;
dateval: Date
}


My template:

<ul>
<li *ngFor="let order of OrderValidations" >
-- id: {{order.orderId}}
-- name: {{order.contactId}}
</li>
</ul>


Can somebody help me to display the http request result on the template please

Continue reading...