Activity 32: Angular Library Grid

Funda, Mark Harvey D. BSIT 4TH Year

Welcome to my Angular library grid! This project presents a collection of 12 books arranged in a neat grid layout. Each book is represented by an image accompanied by a description, creating a simple yet visually engaging display. By running the project, you can view this interactive library on a website. Explore and enjoy!

book.component.html

<div class="container">
    <div class="grid">
        <div
            *ngFor="let book of books"
            class="card">
            <img
                [src]="book.imageUrl"
                alt="{{ book.title }}"
                class="card-img" />
            <div class="card-content">
                <h2 class="card-title">{{ book.title }}</h2>
                <p class="card-author">{{ book.author }}</p>
                <p class="card-genre">{{ book.genre }} - {{ book.year }}</p>
                <p class="card-description">{{ book.description }}</p>
                <p class="card-rating">Rating: {{ book.rating }}</p>
            </div>
        </div>
    </div>
</div>

book.component.ts

import { Component, inject, OnInit } from '@angular/core';
import { BookService } from '../book.service';
import { Book } from '../book.interface';
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;
            console.log(books);
        });
    }
}

book.interface.ts

export interface Book {
    id: number;
    title: string;
    genre: string;
    author: string;
    year: number;
    imageUrl: string;
    description: string;
    rating: number;
}

book.service.ts

import { Injectable } from '@angular/core';
import { Book } from './book.interface';
import { Observable, of } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class BookService {
    samplePlaceholderImageURl = 'https://placehold.co/400';

    private books: Book[] = [
        {
            id: 1,
            title: 'Alamat ng Kalabaw',
            genre: 'Adventure',
            author: 'Segundo D.  Matias',
            year:     2009,
            imageUrl: 'Kalabaw.jpg',
            description:'(Part of the Modernong Alamat Series by Segundo D. Matias Jr.',
            rating: 4.5,
        },
        {
            id: 2,
            title: 'Alamat ng Atis',
            genre: 'Fiction',
            author: 'Rene O. Villanueva',
            year: 2007,
            imageUrl: 'Atis.jpg',
            description:
                '(The Legend of the Custard Apple) (Modernong Alamat - Modern Legend)',
            rating: 4.8,
        },
        {
            id: 3,
            title: 'Alamat ng Ahas',
            genre: 'Fiction',
            author: 'Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Ahas.jpg',
            description:
                '(THE LEGEND OF THE SNAKE)',
            rating: 4.7,
        },
        {
            id: 4,
            title: 'Alamat ng Bawang',
            genre: 'Adventure',
            author: ' Segundo D. Matias Jr. and Jomike Tejido',
            year: 2009,
            imageUrl: 'Bawang.jpg',
            description:
                '(THE LEGEND OF GARLIC)',
            rating: 4.6,
        },
        {
            id: 5,
            title: 'Alamat ng Butiki',
            genre: 'Horror',
            author: 'Rene O. Villanueva',
            year: 2007,
            imageUrl: 'Butiki.jpg',
            description:
                'The Legend of the House Lizard (Modernong Alamat - Modern Legend)',
            rating: 4.4,
        },
        {
            id: 6,
            title: 'Alamat ng Buwaya',
            genre: 'Adventure',
            author: ' Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Buwaya.jpg',
            description:
                'The Legend of the Crocodile [Tagalog]',
            rating: 4.2,
        },
        {
            id: 7,
            title: 'Alamat ng Rosas',
            genre: 'Romance',
            author: ' Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Rosas.jpg',
            description:
                '(The Legend of the Rose)',
            rating: 4.3,
        },
        {
            id: 8,
            title: 'Alamat ng Lansones',
            genre: 'Adventure',
            author: 'Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Lansones.jpg',
            description:
                '(The Legend of the Lanzones)',
            rating: 4.1,
        },
        {
            id: 9,
            title: 'Alamat ng Puno ng Nara',
            genre: 'Fantasy',
            author: 'Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Narra.jpg',
            description:
                'The Legend of the Narra Tree',
            rating: 4.9,
        },
        {
            id: 10,
            title: 'Alamat ng Mangga',
            genre: 'Sci-Fi',
            author: 'Rene O. Villanueva',
            year: 2007,
            imageUrl: 'Mangga.jpg',
            description:
                'The Legend of the Mango (Modernong Alamat - Modern Legend)',
            rating: 4.5,
        },
        {
            id: 11,
            title: 'Alamat ng Pagong',
            genre: 'Fantasy',
            author: 'Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Pagong.jpg',
            description:
                'The Legend of the Turtle',
            rating: 4.6,
        },
        {
            id: 12,
            title: 'Alamat ng Agila',
            genre: 'Dystopian',
            author: 'Segundo D. Matias Jr.',
            year: 2009,
            imageUrl: 'Agila.jpg',
            description:
                '(The Legend of the Eagle)',
            rating: 4.4,
        },

    ];

    getBooks(): Observable<Book[]> {
        return of(this.books);
    }
}

OUTPUT:

GitHub Repository Link: https://github.com/HaileySnow/Activity-32.git

Firebase Hosting Link: https://activity32-1760b.web.app/