Activity 32: Angular Library Grid
book.service.ts
This file will contain the BookService which is responsible for managing the data of the books. It might handle HTTP requests to an API.
import { Injectable } from '@angular/core';
import { Book } from './book.model';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class BookService {
placeholder = 'https://placehold.co/250';
private readonly books: Book[] = [
{
id: 1,
name: 'Beloved',
director: ' by Toni Morrison',
description: 'A haunting narrative about former slaves in post-Civil War America.',
imageUrl: this.placeholder,
},
{
id: 2,
name: '1984',
director: 'by George Orwell',
description: 'A dystopian novel about totalitarianism where the government.',
imageUrl: this.placeholder,
},
{
id: 3,
name: 'Circe',
director: 'by Madeline Miller',
description: 'A retelling life of Circe, the enchantress from Homer’s "Odyssey,".',
imageUrl: this.placeholder,
},
{
id: 4,
name: 'The Great Gatsby',
director: 'by F. Scott Fitzgerald',
description: 'explores themes of wealth, love, and the American Dream.',
imageUrl: this.placeholder,
},
{
id: 5,
name: 'Dune',
director: 'by Frank Herbert',
description: 'A science fiction epic set on the desert planet of Arrakis.',
imageUrl: this.placeholder,
},
{
id: 6,
name: 'The Alchemist',
director: 'by Paulo Coelho',
description: 'This philosophical tale follows Santiago, a shepherd boy on a quest to discover his personal legend.',
imageUrl: this.placeholder,
},
{
id: 7,
name: 'The Book Thief',
director: 'by Markus Zusak',
description: 'this poignant novel set in Nazi Germany follows a young girl named Liesel who finds solace in stealing books.',
imageUrl: this.placeholder,
},
{
id: 8,
name: 'The Road',
director: 'by Cormac McCarthy',
description: 'A harrowing post-apocalyptic tale of a father and son traveling through a desolate landscape.',
imageUrl: this.placeholder,
},
{
id: 9,
name: 'Educated',
director: 'by Tara Westover',
description: 'This memoir recounts the author’s journey from growing up in a strict and abusive household .',
imageUrl: this.placeholder,
},
{
id: 10,
name: 'The Night Circus',
director: 'by Erin Morgenstern',
description:'A magical tale of a mysterious competition between two young illusionists set in a fantastical circus .',
imageUrl: this.placeholder,
},
{
id: 11,
name: 'To Kill a Mockingbird',
director: 'by Harper Lee',
description: 'A coming-of-age story,in American South (1930s) addresses issues like racial inequality and moral growth.',
imageUrl: this.placeholder,
},
{
id: 12,
name: 'Pride and Prejudice',
director: ' by Jane Austen',
imageUrl: this.placeholder,
description: 'A classic romance that follows Elizabeth Bennet as she navigates issues of class, family, and personal pride.',
},
{
id: 13,
name: 'The Catcher in the Rye',
director: 'by J.D. Salinger',
description: 'A poignant look at teenage angst and alienation,follows Holden Caulfield.',
imageUrl: this.placeholder,
},
{
id: 14,
name: 'Sapiens: A Brief History of Humankind',
director: 'by Yuval Noah Harari',
description: 'A thought-provoking non-fiction,explores the history of humankind.',
imageUrl: this.placeholder,
},
{
id: 15,
name: 'The Silent Patient',
director: 'by Alex Michaelides',
description: 'psychological thriller with uncovering why a woman stopped speaking after murdering her husband.',
imageUrl: this.placeholder,
},
];
getBooks(): Observable<Book[]> {
return new Observable<Book[]>((subscriber) => {
subscriber.next(this.books);
subscriber.complete();
});
}
}
book.model.ts
This file defines the Book model using TypeScript interfaces or classes. It will represent the structure of a book object.
export interface Book {
id: number;
name: string;
director: string;
description: string;
imageUrl: string;
}
book.component.ts
This is the component that interacts with the service to display the books and possibly allow for book management operations.
import { Component, inject, OnInit } from '@angular/core';
import { Book } from '../book.model';
import { BookService } from '../book.service';
import { NgForOf } from '@angular/common';
@Component({
selector: 'app-book',
standalone: true,
imports: [NgForOf],
templateUrl: './book.component.html',
styleUrl: './book.component.css',
})
export class BookComponent implements OnInit {
private readonly bookService = inject(BookService);
books: Book[] = [];
ngOnInit(): void {
this.bookService.getBooks().subscribe((books: Book[]) => {
this.books = books;
});
}
StartReading() {
alert('The book has been Read!');
}
addToReadinglist() {
alert('The book has been added to the Reading list!');
}
}
book.component.html
This is the HTML template that will be used to display the list of books and potentially other operations.
<body>
<div class="header">
<h1>Activity 32: Angular Library Grid</h1>
</div>
<main class="container">
<div
class="card"
*ngFor="let book of books">
<img
[src]="book.imageUrl"
alt="" />
<h1>{{ book.name }}</h1>
<h2>Written {{ book.director }}</h2>
<h2>{{ book.description }}</h2>
<button
class="btn btn--primary"
(click)="StartReading()">
Start Reading
</button>
<button
class="btn btn--secondary"
(click)="addToReadinglist()">
Add to Reading list
</button>
</div>
</main>
</body>
DESKTOP
TABLET
MOBILE
