# 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.

```typescript
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.

```typescript
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.

```typescript
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.

```typescript
<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**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732355516959/89bed53e-ecc4-4948-b38f-034de5a814eb.png align="center")

### **TABLET**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732355471815/a1e2e384-e67a-4a6c-8054-5a5f5ff5f803.png align="center")

### **MOBILE**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1732355353067/002cf335-0159-4787-915c-662353f9e470.png align="center")

### **Github Repository Link:** [Darsssiiieee/SIA102-ACT32](https://github.com/Darsssiiieee/SIA102-ACT32)

### [**Web URL from Firebase ho**](https://github.com/Darsssiiieee/SIA102-ACT32)**sting:** [SIA102 - ACT32](https://sia102-act32-darsie.web.app/)