Activity 32: Angular Library Grid

Create `book.model.ts`

Define the structure of your book data in src/app/models/book.model.ts:

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:

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:

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:

<div class="book-card">  
  <img [src]="book.coverImage" alt="{{ book.title }}" />  
  <h3>{{ book.title }}</h3>  
  <p>Author: {{ book.author }}</p>  
  <p>Price: ${{ book.price }}</p>  
  <p>Stock: {{ book.stock }}</p>  
</div>

Update `app.component.ts`

Use the BookService to fetch the list of books and pass them to the book component:

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:

<div class="book-list">  
  <app-book *ngFor="let book of books" [book]="book"></app-book>  
</div>

Style with Grid and Flexbox (BEM CSS)

In src/app/components/book/book.component.css:

.book-card {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 1rem;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  background-color: #f9f9f9;  
}  
.book-card img {  
  max-width: 100%;  
  height: auto;  
  margin-bottom: 1rem;  
}

src/app/app.component.css:

.book-list {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  
  gap: 1rem;  
}  

@media (min-width: 768px) {  
  .book-list {  
    grid-template-columns: repeat(3, 1fr);  
  }  
}  

@media (min-width: 1024px) {  
  .book-list {  
    grid-template-columns: repeat(5, 1fr);  
  }  
}