backend api works

Author: actionanand

src/app/places/available-places/available-places.component.html

@@ -1,7 +1,11 @@
 <app-places-container title="Available Places">
+  @if (isFetching()) {
+    <p class="fallback-text">fetching available places!</p>
+  }
+
   @if (places()) {
-  <app-places [places]="places()!" />
+    <app-places [places]="places()!" />
   } @else if (places()?.length === 0) {
-  <p class="fallback-text">Unfortunately, no places could be found.</p>
+    <p class="fallback-text">Unfortunately, no places could be found.</p>
   }
 </app-places-container>

src/app/places/available-places/available-places.component.ts

@@ -1,4 +1,7 @@
-import { Component, signal } from '@angular/core';
+import { Component, DestroyRef, inject, OnInit, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { map, tap } from 'rxjs/operators';
 
 import { Place } from '../../models/place.model';
 import { PlacesComponent } from '../places.component';
@@ -11,6 +14,35 @@ import { PlacesContainerComponent } from '../places-container/places-container.c
   styleUrl: './available-places.component.css',
   imports: [PlacesComponent, PlacesContainerComponent],
 })
-export class AvailablePlacesComponent {
+export class AvailablePlacesComponent implements OnInit {
   places = signal<Place[] | undefined>(undefined);
+  isFetching = signal(false);
+
+  private http = inject(HttpClient);
+  private destroyRef = inject(DestroyRef);
+
+  ngOnInit(): void {
+    this.isFetching.set(true);
+
+    const availablePlaceSub = this.http
+      .get<{ places: Place[] }>('/api/v2/places', {
+        observe: 'response',
+      })
+      .pipe(
+        tap(rawResp => {
+          console.log('Raw Response: ', rawResp);
+        }),
+        map(data => data.body),
+      )
+      .subscribe({
+        next: resp => {
+          this.places.set(resp?.places);
+        },
+        complete: () => {
+          this.isFetching.set(false);
+        },
+      });
+
+    this.destroyRef.onDestroy(() => availablePlaceSub.unsubscribe());
+  }
 }

src/app/places/places.component.html

@@ -2,10 +2,7 @@
   @for (place of places(); track place.id) {
     <li class="place-item">
       <button (click)="onSelectPlace(place)">
-        <img
-          [src]="'http://localhost:3000/' + place.image.src"
-          [alt]="place.image.alt"
-        />
+        <img [src]="url + place.image.src" [alt]="place.image.alt" />
         <h3>{{ place.title }}</h3>
       </button>
     </li>

src/app/places/places.component.ts

@@ -12,6 +12,8 @@ import { Place } from '../models/place.model';
 export class PlacesComponent {
   places = input.required<Place[]>();
   selectPlace = output<Place>();
+  // protected url = 'http://localhost:3000/';
+  protected url = 'https://3000-actionanand-angularhttp-six5y8k89a8.ws-us116.gitpod.io/';
 
   onSelectPlace(place: Place) {
     this.selectPlace.emit(place);