Book Component HTML
<div class="header">HP BOOKS</div>
<div class="book container">
<div class="bookcontainer" *ngFor="let books of books">
<div class="bookimg">
<img [src]="books.img" alt="">
</div>
<div class="bookinfo">
<h3 class="booktitle">{{ books.title }}</h3>
<p class="bookprice">{{ books.price | currency }}</p>
<p class="bookdescription">{{ books.description }}</p>
<div class="button-container">
<button class="btn add-to-cart">Synopsis</button>
<button class="btn buy-now">Buy Now</button>
</div>
</div>
</div>
</div>
Book Component Typescript
import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { NgModel } from '@angular/forms';
import { Book } from './act32-model';
import { BookService } from '../act32-service';
@Component({
selector: 'app-act32-book',
templateUrl: './act32-book.component.html',
styleUrl: './act32-book.component.css'
})
export class Act32BOOKComponent {
books: Book[]=[];
constructor(private bookService:BookService){
}
ngOnInit(): void {
this.books = this.bookService.getBook();
}
}
Book Model Typescript
export interface Book{
title:string;
img:string;
description: string;
price:number;
}
Book Service Typescript
import { Injectable } from "@angular/core";
import { Book } from "./act32-books/act32-model";
@Injectable({
providedIn: "root",
})
export class BookService{
private books: Book[]=[
{
title: "Harry Potter and the Philosopher's Stone",
description:'Release Date: June 26, 1997',
img:'HP1.jpg',
price: 5000
},
{
title: 'Harry Potter and the Chamber of Secrets',
description:'Release Date: July 2, 1998',
img:'HP2.jpg',
price: 4500
},
{
title: 'Harry Potter and the Prisoner of Azkaban',
description:'Release Date: July 8, 1999',
img:'HP6.jpg',
price: 4000
},
{
title: 'Harry Potter and the Goblet of Fire',
description:'Release Date: July 8, 2000',
img:'HP4.jpg',
price: 3500
},
{
title: 'Harry Potter and the Order of the Phoenix',
description:'Release Date: June 21, 2003',
img:'HP3.jpg',
price: 3000
},
{
title: 'Harry Potter and the Half-Blood Prince',
description:'Release Date: July 16, 2005',
img:'HP5.jpg',
price: 2500
},
{
title: 'Harry Potter and the Deathly Hallows',
description:'Release Date: July 21, 2007',
img:'HP7.jpg',
price: 2000
},
{
title: 'Harry Potter and the Cursed Child (Parts One and Two)',
description:'Release Date: July 31, 2016',
img:'HP8.jpg',
price: 1500
}
];
getBook():Book[]{
return this.books;
}
}
App Component Typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'Angular32';
}
Output
Firebase Link: https://activity32-2550c.web.app/
GitHub Link: https://github.com/Sukucee/Activity_32--Angular-Library-Grid.git