Activity 32: Angular Library Grid

Create a List of Object Data Structures

book.service.ts

book.model.ts

book.component.ts

book.component.html

<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">
        Year: <span class="roboto-regular">{{ book.publicationYear }}</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">Click</button>
      </div>
    </div>
  </div>
  }
</main>

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { LibraryComponent } from './library.component';

describe('LibraryComponent', () => {
  let component: LibraryComponent;
  let fixture: ComponentFixture<LibraryComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [LibraryComponent]
    })
    .compileComponents();

    fixture = TestBed.createComponent(LibraryComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

a

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();
  }
}

https://activity32-maryjoy.web.app