Activity 32: Angular Library Grid

What is GRID?

In Angular, a grid is just a way to arrange content in a clean and responsive layout. Angular itself doesn’t come with a grid system built-in, but you can easily use CSS frameworks or libraries to create one.

🍀Books.Service.ts 🍀

import { Injectable } from '@angular/core';
import { Books } from './books';

@Injectable({
  providedIn: 'root',
})
export class BooksService {
  constructor() {}

  private booklist: Books[] = [
    {
      bookID: 1,
      bookTitle: 'Hell University Part I ',
      genre: 'Mystery/thriller',
      author: 'KnightInBlack',
      image: 'https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1503028304i/36061202.jpg',  
    },

    {
      bookID: 2,
      bookTitle: 'Hell University Part II',
      genre: 'Mystery/thriller',
      author: 'KnightInBlack',
      image:
        'https://images.gr-assets.com/books/1516656793l/38125030.jpg',
    },
    {
      bookID: 3,
      bookTitle: 'Hello, Love, Goodbye.',
      genre: 'Romance',
      author: 'Charmaine Lasar',
      image:
        'https://th.bing.com/th/id/OIP.it1-Jomu56p5832cZe27gAAAAA?rs=1&pid=ImgDetMain ',
    },
    {
      bookID: 4,
      bookTitle: 'Hello, Love, Again.',
      genre: 'Romance',
      author: 'Cathy Garcia-Sampana',
      image:
        'https://a.ltrbxd.com/resized/film-poster/1/1/7/5/2/7/9/1175279-hello-love-again-0-230-0-345-crop.jpg?v=2c587fafb4',
    },
    {
      bookID: 5,
      bookTitle: '2012',
      genre: 'Action/Adventure',
      author: 'Roland Emmerich',
      image:
        'https://picfiles.alphacoders.com/357/thumb-1920-357869.jpg',
    },
    {
      bookID: 6,
      bookTitle: 'The Purge (2013)',
      genre: 'Horror/Tragic',
      author: 'James Demonaco',
      image:
        'https://image.tmdb.org/t/p/original/qRNA7Kzo9GyjVfT33yuoa6bFfYj.jpg',
    },
    {
      bookID: 7,
      bookTitle: 'The Purge: The Election Year (2016) ',
      genre: 'Horror/Tragic',
      author: 'James DeMonaco',
      image:
        'https://th.bing.com/th/id/R.912b0d3eaa68d37da44e702b579102ac?rik=HWd7NXmmy6kK1g&riu=http%3a%2f%2fwww.blackfilm.com%2fread%2fwp-content%2fuploads%2f2016%2f05%2fThe-Purge-Election-Year-poster-2.jpg&ehk=vA9Opc0NZKNKxvZEB5bqOzSRyX1x%2bxzkYLnDnNjrT9I%3d&risl=&pid=ImgRaw&r=0',
    },
    {
      bookID: 8,
      bookTitle: 'The Wrong Turn',
      genre: 'Horror/Tragic',
      author: ' Rob Schmidt',
      image:
        'https://productimages.worldofbooks.com/B008B50WKE.jpg',
    },
    {
      bookID: 9,
      bookTitle: 'Wrong Turn 2: Dead End',
      genre: 'Horror/Tragic',
      author: 'Joe Lynch',
      image:
        'https://coopersbeckett.com/wp-content/uploads/2021/01/44067-wrong-turn-2-dead-end-0-500-0-750-crop-q94yMg.jpeg',
    },
    {
      bookID: 10,
      bookTitle: 'Wrong Turn 3: Left for Dead',
      genre: 'Television Series',
      author: "Declan O'Brien",
      image:
        'https://th.bing.com/th/id/OIP.HAd2AxFnPGDZi6SOJ_V3_QHaKY?rs=1&pid=ImgDetMain',
    },
  ];

  getBooks(): Books[] {
    return this.booklist;
  }
}

On this service, we have a data structure with a list of objects with a different information, let’s breakdown how to better understanding.

The BooksService is an Angular service designed to manage and provide book data to other parts of the application. It contains a private array, booklist, which holds the details of multiple books, such as their title, author, genre, and image. The getBooks() method is used to access this list. When called, it returns the booklist array, allowing other components in your app to display or use the book data.

By using the @Injectable({ providedIn: 'root' }) decorator, the service is made available globally, meaning it can be easily injected into any component that needs access to the book list.

🍀 books.model.ts🍀

export interface Books  {

  bookID: number;
  bookTitle: string;
  author: string;
  genre: string;
  image: string;

}

As the code snippets above defines that the Books interface defines what a "book" looks like in your application. It sets up the required details each book must have:

A bookID (a unique number for each book), 🐧
A bookTitle (the title of the book), 🐧
An author (who wrote it), 🐧
A genre (the type of book, like romance or mystery), 🐧
An image (the URL of the book cover).🐧

This interface is used in your BooksService to make sure every book in your booklist follows the same format. So, when you fetch the list of books, Angular knows exactly what information to expect, helping keep everything organized and consistent across your app. 🐧

🍀Books.component.ts🍀

import { Component } from '@angular/core';
import { Books } from './books';
import { BooksService } from './books.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrl: './books.component.css'
})
export class BooksComponent {


  books: Books[] = [];

  constructor(private bookService: BooksService) {}

  ngOnInit(): void {
    this.books = this.bookService.getBooks();
    console.log(this.books);
  }

}

The BooksComponent is the part of your app that handles displaying the list of books. Let’s breakdown each of them so you can understand how it works and connected in the other files or components. 🐧🐧🐧

Imports: 🥖
- It imports the Books interface, which helps define the structure of a book, so we know exactly what kind of data each book should have (like title, author, genre, etc.).
- It also imports BooksService, which is the service that contains the actual book data.
books Array:
- The component has a books array, which is initially empty. This array will later hold all the book objects that we want to display in the component.
**Constructor:**🥖
- The constructor is where the magic of dependency injection happens. It uses private bookService: BooksService, which means the component gets access to the BooksService. This lets the component ask for the book data from the service whenever it needs.
ngOnInit() Lifecycle Hook: 🥖
- ngOnInit() is a lifecycle hook in Angular that runs once the component has been initialized (meaning it's been loaded onto the page).
- Inside ngOnInit(), the component calls this.bookService.getBooks(). This fetches the list of books from the service and stores them in the books array.
- The console.log(this.books) line is there to print the list of books to the browser's console, which is useful for debugging and seeing if the data is loaded properly.

In essence, this component pulls the book data from the service and stores it in a local books array. This array can then be used in the component's HTML template to display the books. It’s a simple but powerful way to keep your data organized and ensure everything works together smoothly. 🎯

🍀book.component.html 🍀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LIBRO NI RHED</title>
</head>
<body>
  <h1>FICTION AND MOVIE LIBRARY LIST</h1>
  <div class="thecontainer">
    <div class="thecontainer__content">
      <div *ngFor="let book of books" class="thecontainer__content-card">
        <img [src]="book.image" class="card__Theimage" />
        <div class="card__content">
          <h3 class="card__Thetitle">{{ book.bookTitle }}</h3>
          <p class="card__Theauthor">{{ book.author }}</p>
          <p class="card__Therating">
            Rating:<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
            ><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            <i class="fa-regular fa-star"></i>
          </p>
          <button class="btn btn-primary" id="btn_avail">Ready for use</button> <br />
          <button class="btn btn-secondary">View Details</button>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

As we can see, through data binding and interpolation, we get the information in the services at the same time with reusable code and efficient way to be clean code. Using the BEM architecture, as we see the organized naming convention that deals to the programmer or us as a developer make readable and understandable.

This HTML code is designed to display a collection of books in a structured and user-friendly layout. Using Angular’s *ngFor directive, it loops through the books array and dynamically generates a card for each book. Each card contains the book’s cover image, title, author, and a placeholder rating (represented by stars). The cards are neatly organized within a container, making it easy to view multiple books at once.

There are also two buttons for each book: one labeled "Ready for use," indicating that the book is available, and another labeled "View Details," which could be used for future details or actions. The page title, "LIBRO NI RHED" sets the theme of the library, while the overall design ensures that users can easily browse through the books in a visually appealing way.

🍀Book.component.css🍀

body{
  background-color: rgb(128, 14, 250);
}
.thecontainer { 
  padding: 3rem;
  border: 2px solid rgb(56, 45, 121);
  min-height: 100vh;

}
  h1 {
    padding: 20px 20px 20px 20px;
    color:aqua;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    margin: 20px 20;
  }
.card__Theimage { 
  height: 200px;
  width: 150px;
  border-radius: 25px;
}
.thecontainer__content { 
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.thecontainer__content-card { 
  background-color: #000000;
  height:auto;
  border-radius: 25px;
  display: flex;
  width: 208px;
  padding: 3rem;
  flex-direction: column;
  align-items: center;
}


.card__content { 
  width: 100%;
  margin-top: 1rem;
  line-height: 2;
}

.btn-primary { 
  border: 2px solid rgba(128, 14, 250, 0.695);
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center ;
  margin-bottom: -1.5rem;
  justify-self: center;
}

.btn { 
  margin-right: 3px;
  padding: 5px 10px;
  border: none;
  border-radius: 12px;
}


.btn-secondary { 
  background:  rgb(128, 14, 250); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center ;
  margin-bottom: -1.5rem;
  justify-self: center;
  border: none;
  color: white;
}
#btn_avail {
  color:  rgb(203, 154, 255);;
}
h3 {
  color:  rgb(203, 154, 255);;
}
p {
  color:  rgb(203, 154, 255);;
}

This is my CSS I use for designing my html and applied also BEM architecture design.

POSTSCRIPT/ PAHABOL

In this guide and postscript, I’ve covered the essential files that power your Angular book library app: book.service.ts for managing and fetching book data, book.model.ts for defining the structure of each book, and book.component.ts and book.component.html for displaying the books on the page. Together, these documentation I’ve created will seamlessly help to understand how work the components, the services, and models with ANGULAR! Than kyou.🥨🥨🥨

OUTPUT: