Just started mastering Angular.
I've successfully set up an API with Spring-boot and developed some Angular components to display the data, but unfortunately, nothing is showing up.
In my Angular project, I've created a Service to handle all the API requests.
Within this service, I initialized an empty array of type 'any' like this:
locations : any[] = [];
Then, I made a GET request and assigned the response value to the array inside a method:
getAllLocations(){
this.http.get("http://localhost:9595/oota-reg/api/locations/all").subscribe({
next : (response : any) =>{
console.log(response);
this.locations = response;
},
error : (error) => {
console.log("Oops! Something went wrong..", error);
}
})
}
Now, moving on to creating two more components, namely the Home component and a Card component, just basic stuff.
The responsibility of the home component is to loop through all elements in the array and display a card for each element using the Card component.
<div class="flex justify-center flex-wrap gap-5">
@for (item of cards; track $index) {
<app-card></app-card>
}@empty {
<p>none</p>
}
</div>
However, the issue arises in the home.component.ts file where I intended to create an array named 'cards',
inject the Service, and assign the array value from the Service after the GET call.
private locationService : LocationService = inject(LocationService);
public cards : any[] = [];
ngOnInit(): void {
this.locationService.getAllLocations();
this.cards = this.locationService.locations
console.log(this.cards);
}
But unfortunately, the 'cards' array remains empty.
How can I properly pass the data?