From d008c4de48fe96efd9fe7d70d1788c75eedbadc9 Mon Sep 17 00:00:00 2001
From: Brok3Turtl3 <brok3turtl3@gmail.com>
Date: Thu, 17 Oct 2024 16:34:57 -0400
Subject: [PATCH] Added books.component logic and boilerplate books template

---
 .../src/app/pages/books/books.component.html  | 10 +++++++++-
 .../src/app/pages/books/books.component.ts    | 19 +++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/angular-resources-page/src/app/pages/books/books.component.html b/angular-resources-page/src/app/pages/books/books.component.html
index c83bc50..25bd733 100644
--- a/angular-resources-page/src/app/pages/books/books.component.html
+++ b/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>
+  
diff --git a/angular-resources-page/src/app/pages/books/books.component.ts b/angular-resources-page/src/app/pages/books/books.component.ts
index 3cdcbb4..45cffe5 100644
--- a/angular-resources-page/src/app/pages/books/books.component.ts
+++ b/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));
   }
-
 }