# Activity 32: Angular Library Grid
### Create `book.model.ts`
Define the structure of your book data in `src/app/models/book.model.ts`:
```typescript
export interface Book {
id: number;
title: string;
author: string;
price: number;
stock: number;
coverImage: string;
}
```
---
### Create `book.service.ts`
Add logic for fetching or managing book data in `src/app/services/book.service.ts`:
```typescript
import { Injectable } from '@angular/core';
import { Book } from '../models/book.model';
@Injectable({ providedIn: 'root' })
export class BookService {
getBooks(): Book[] {
return [
{ id: 1, title: 'Book A', author: 'Author A', price: 100, stock: 10, coverImage: 'link1.jpg' },
{ id: 2, title: 'Book B', author: 'Author B', price: 150, stock: 5, coverImage: 'link2.jpg' },
// Add 6 more books
];
}
}
```
---
### Implement `book.component.ts`
Display the book data in `src/app/components/book/book.component.ts`:
```typescript
import { Component, Input } from '@angular/core';
import { Book } from '../../models/book.model';
@Component({
selector: 'app-book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css'],
})
export class BookComponent {
@Input() book!: Book;
}
```
---
### Add `book.component.html`
Use a clean layout for individual books in `src/app/components/book/book.component.html`:
```typescript
{{ book.title }}
Author: {{ book.author }}
Price: ${{ book.price }}
Stock: {{ book.stock }}
```
---
### Update `app.component.ts`
Use the `BookService` to fetch the list of books and pass them to the book component:
```typescript
import { Component, OnInit } from '@angular/core';
import { Book } from './models/book.model';
import { BookService } from './services/book.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
books: Book[] = [];
constructor(private bookService: BookService) {}
ngOnInit(): void {
this.books = this.bookService.getBooks();
}
}
```
---
### Update `app.component.html`
Display the books using the `app-book` component in a responsive grid layout:
```typescript