Added books.component logic and boilerplate books template

angular-resources-page/src/app/pages/books/books.component.html

@@ -1 +1,9 @@
-<p>books works!</p>
+<div class="container mx-auto mt-8">
+    <h1 class="text-2xl font-bold mb-4">Books</h1>
+    <ul class="list-disc pl-6 space-y-2">
+      <li *ngFor="let book of books">
+        <a [href]="book.link" target="_blank">{{ book.title }}</a> by {{ book.author }}
+      </li>
+    </ul>
+  </div>
+

angular-resources-page/src/app/pages/books/books.component.ts

@@ -1,15 +1,26 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+interface Book {
+  id: string;
+  title: string;
+  author: string;
+  link: string;
+}
 
 @Component({
   selector: 'app-books',
   templateUrl: './books.component.html',
-  styleUrls: ['./books.component.css']
+  styleUrls: ['./books.component.scss'],
 })
 export class BooksComponent implements OnInit {
+  books: Book[] = [];
 
-  constructor() { }
+  constructor(private http: HttpClient) {}
 
-  ngOnInit(): void {
+  ngOnInit() {
+    this.http
+      .get<Book[]>('http://localhost:8080/api/books')
+      .subscribe((data) => (this.books = data));
   }
-
 }