feat: got demo app to test breadcrumbs

apps/got-demo/src/app/app.module.ts

@@ -3,12 +3,14 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { ROUTER_COMPONENTS, AppRoutingModule } from './app.routing.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [AppComponent, ...ROUTER_COMPONENTS],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/got-demo/src/app/app.routing.module.ts

@@ -1,16 +1,12 @@
 import { RouterModule, Routes } from "@angular/router";
 import { NgModule } from "@angular/core";
 import { HousesComponent } from './houses/houses.component';
-import { CharactersComponent } from './characters/characters.component';
 import { BooksComponent } from './books/books.component';
 
 export const appRoutes: Routes = [
   {
     path: "books",
     component: BooksComponent,
-  }, {
-    path: "characters",
-    component: CharactersComponent,
   }, {
     path: "houses",
     component: HousesComponent,
@@ -23,4 +19,4 @@ export const appRoutes: Routes = [
 })
 export class AppRoutingModule { }
 
-export const ROUTER_COMPONENTS = [BooksComponent, CharactersComponent, HousesComponent];
+export const ROUTER_COMPONENTS = [BooksComponent, HousesComponent];

apps/got-demo/src/app/books/books.component.html

@@ -1 +1,8 @@
-<p>books works!</p>
+<div *ngIf="books$ | async as books; else loading">
+  <ul>
+    <li *ngFor="let book of books">
+      <a [routerLink]="['/books', book.url[book.url.length-1] ]" [queryParams]="{ pages: book.numberOfPages }">{{book.name}}</a>
+    </li>
+  </ul>
+ </div>
+<ng-template #loading>loading ...</ng-template>

apps/got-demo/src/app/books/books.component.ts

@@ -1,15 +1,17 @@
 import { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'got-books',
   templateUrl: './books.component.html',
   styleUrls: ['./books.component.css']
 })
 export class BooksComponent implements OnInit {
-
-  constructor() { }
+  books$: Observable<any[]>
+  constructor(private dataService: DataService) { }
 
   ngOnInit(): void {
+    this.books$ = this.dataService.getBooks();
   }
-
 }

apps/got-demo/src/app/data.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+const options = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  private API = `https://www.anapioficeandfire.com/api`;
+
+  constructor(private http: HttpClient) { }
+
+  getBooks(): Observable<any[]> {
+    return this.http.get<any[]>(`${this.API}/books`);
+  }
+
+  getCharacters(): Observable<any[]> {
+    return this.http.get<any[]>(`${this.API}/characters`);
+  }
+
+  getHouses(): Observable<any[]> {
+    return this.http.get<any[]>(`${this.API}/houses`);
+  }
+}

apps/got-demo/src/app/houses/houses.component.html

@@ -1 +1,8 @@
-<p>houses works!</p>
+<div *ngIf="houses$ | async as houses; else loading">
+  <ul>
+    <li *ngFor="let book of houses">
+      {{book.name}}
+    </li>
+  </ul>
+ </div>
+<ng-template #loading>loading ...</ng-template>

apps/got-demo/src/app/houses/houses.component.ts

@@ -1,15 +1,17 @@
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'got-houses',
   templateUrl: './houses.component.html',
   styleUrls: ['./houses.component.css']
 })
 export class HousesComponent implements OnInit {
-
-  constructor() { }
+  houses$: Observable<any[]>
+  constructor(private dataService: DataService) { }
 
   ngOnInit(): void {
+    this.houses$ = this.dataService.getHouses();
   }
-
 }