Activity 32: Angular Library Grid

This documentation outlines the structure and functionality of the Book Application, a simple application that manages book data. The application is built using TypeScript and Angular, and consists of the following components:

1. book.service.ts:

• Purpose: The book.service.ts file houses the service responsible for managing book data. It provides methods for creating, reading, updating, and deleting (CRUD) books.

• Key Methods:

  • getBooks(): Retrieves all books from the data source.

  • getBook(id: number): Retrieves a specific book by its ID.

  • addBook(book: Book): Adds a new book to the data source.

  • updateBook(book: Book): Updates an existing book in the data source.

  • deleteBook(id: number): Deletes a book from the data source.

• Example Usage:

import { Injectable } from '@angular/core';
import { Book } from '../models/library.mode';

@Injectable({
  providedIn: 'root',
})
export class LibraryService {
  private bookList: Book[] = [
    {
      title: 'The Road',
      author: 'Cormac McCarthy',
      genre: 'post-apocalyptic novel',
      image:
        'https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcTMyXfytfecHc5C4zkpa7KG-GPppmcochwcD_elPZNSffw5MvtgyFXC4Y6uyqFMKeprStO-JTPLMkpuf8RnWD1gj3Kbkqj5vFWzt13ncDS3',
    },
    {
      title: 'Scythe',
      author: 'Neal Shusterman',
      genre: 'science fiction novel',
      image:
        'https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcQGzXKxRFGNMWrBwb9AdpPBYa_Z1J8dvayDUXtz_YvD-z7ZoGvzvwSW_P1bihgrxdBxs3CzS7-ndqECva0vq56w7sZD2iC7yZR63TP6a2JQxsqHBEav94CPJw',
    },
    {
      title: 'The Butcher',
      author: 'Jennifer Hillier',
      genre: 'psychological thriller',
      image:
        'https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcRM3mhzVZiB0qztDWffLu8BFGzDhcpluDl0baLE0XuP_Hk9J7aq8cT_kLtwP2krkADIztGnLV5UxKFaxoshUwoqfwts_POIt9OB2kr4zag',
    },
    {
      title: 'The God of the Woods',
      author: 'Liz Moore',
      genre: 'mystery',
      image:
        'https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcRy8iWKfsm-J4jJl3HEwOBBpi7Wyp3AkF6yp_OZ5bkqdiVjY6wz-QdbVUfX8iOSGOiNlJ7WoY4JtU8XsZIfRvG-jfZNi9i0jikJhIolF3semaojgD5lnBaC',
    },
    {
      title: 'Journey Under the Midnight Sun',
      author: 'Robert Martin',
      genre: 'Keigo Higashino',
      image:
        'https://encrypted-tbn0.gstatic.com/shopping?q=tbn:ANd9GcQm2Z-7S1HwRF4z3C9i9Z6bRNH4GMrjLFtdM8aPBhN3HUs1HJTGKPhDZ9S5GMoprXVuw46YAyADrc-xkkSHqwCg5_BDBnkI',
    },
    {
      title: 'The Diary of a Young Girl',
      author: 'Anne Frank',
      genre: 'autobiography',
      image:
        'https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcQ4poSktOkazAo5iyN6thN9AJyL1Du3lrAaPevYQFNcKPhEEXe1kFKG3xs1v_ddiTOWndXqwRpOBQx3AZ3_3U3cuorsRFK0U0c7JIX8BTb7ygTafdpiHCRyNQ ',
    },
  ];

  getBookList() {
    return this.bookList;
  }
}

2. book.model.ts:

• Purpose: The book.model.ts file defines the Book interface, which represents the structure of a book object. It defines the properties that each book object should have.

• Interface Definition:

export interface Book {
  title: string;
  author: string;
  genre: string;
  image: string;
}

3. book.component.ts:

• Purpose: The book.component.ts file contains the logic for the Book component, which displays and interacts with book data. It handles user interactions, data binding, and communication with the book.service.ts.

• Key Methods:

  • ngOnInit(): Initializes the component, typically fetching initial book data from the service.

  • addBook(): Handles the addition of a new book.

  • updateBook(book: Book): Handles the updating of an existing book.

  • deleteBook(id: number): Handles the deletion of a book.

• Example Usage:

import { Component } from '@angular/core';
import { Book } from '../../models/library.mode';
import { LibraryService } from '../../services/library.service';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-library',
  standalone: true,
  imports: [],
  templateUrl: './library.component.html',
  styleUrl: './library.component.css',
})
export class LibraryComponent implements OnInit {
  bookList: Book[] = [];

  constructor(private libraryService: LibraryService) {}

  ngOnInit(): void {
    this.bookList = this.libraryService.getBookList();
  }
}

4. book.component.html:

• Purpose: The book.component.html file defines the template for the Book component. It uses Angular's template syntax to display book data and provide user interaction elements.

• Template Structure:

<h1>Activity 32: Angular Library Grid</h1>
<main class="roboto-regular">
  @for(book of bookList; track $index){
  <div class="book-card">
    <div class="book-card__image__container">
      <img class="book-card__image" [src]="book.image" />
    </div>
    <div class="book-card__details">
      <p class="book-card__details__information roboto-bold">
        Title: <span class="roboto-regular">{{ book.title }}</span>
      </p>

      <p class="book-card__details__information roboto-bold">
        Author: <span class="roboto-regular">{{ book.author }}</span>
      </p>
      <p class="book-card__details__information roboto-bold">
        Genre: <span class="roboto-regular">{{ book.genre }}</span>
      </p>
      <div class="button-container">
        <button class="button-borrow roboto-medium">Borrow</button>
      </div>

    </div>
  </div>
  }
</main>

• Key Elements:

  • *ngFor: Iterates over the books array to display each book.

  • {{ book.title }}: Data binding to display the book title.

  • (click)="deleteBook(book.id)": Event binding to trigger the deleteBook() method when the delete button is clicked.

Overall Application Flow:

1. The book.component.ts initializes and fetches book data from the book.service.ts.

2. The book.component.html displays the book data using Angular's template syntax.

3. User interactions, such as adding, updating, or deleting books, are handled by the book.component.ts.

4. The book.component.ts communicates with the book.service.ts to perform CRUD operations on book data.

   GITHUB LINK: https://github.com/jerome09232/activity32

   FIREBASE LINK : https://activity32-66526.web.app/