Estoy creando una aplicación con temática tienda web sobre libros. El problema que estoy teniendo es que quiero mostrar las cards donde se mostrará cada libro con la información con un ngFor. Pero no me funciona y no me da errores.
Componente book-card.component.html
<div class="book">
<div class="book-image">
</div>
<div class="book-info">
<h1 class="book-info-title">{{book.name | uppercase}}</h1>
<h3>{{book.description}}</h3>
<p class="product-info-description">{{book.description}}</p>
<div class="product-info-price">
<h1>{{book.price | number | currency}}</h1>
</div>
</div>
<div class="book-action">
<button [disabled]="!(book.unitsAvailable > 1)" class="book-action-btnBuy">BUY</button>
<button class="book-action-btnAdd">+ CART</button>
</div>
</div>
Componente book-card.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-book-card',
standalone: true,
imports: [CommonModule],
templateUrl: './book-card.component.html',
styleUrl: './book-card.component.scss'
})
export class BookCardComponent {
@Input() book: any;
}
Componente book.component.html
<div class="title">
<h1>Saga de libros Harry Potter</h1>
</div>
<div class="books">
<ng-container *ngFor="let book of books">
<div class="book">
<app-book-card [book]="book"></app-book-card>
</div>
</ng-container>
</div>
Componente book.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BookCardComponent } from "../book-card/book-card.component";
export const books = [
{
image:
'',
name: 'Harry Potter y la Piedra Filosofal',
description:
'Descripcion',
unitAvailable: '34',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y La Camara Secreta',
description:
'Descripcion',
unitAvailable: '21',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y El Prisionero de Azkaban',
description:
'Descripcion',
unitAvailable: '21',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y El Cáliz de Fuego',
description:
'Descripcion',
unitAvailable: '35',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y La Órden del Phoenix',
description:
'Descripcion',
unitAvailable: '21',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y El Misterio del Príncipe',
description:
'Descripcion',
unitAvailable: '10',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y Las Reliquias de La Muerte',
description:
'Descripcion',
unitAvailable: '4',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
{
image:
'',
name: 'Harry Potter y El Legado Maldito',
description:
'Descripcion',
unitAvailable: '50',
price: '20.00',
category: 'Aventura, Magia, Misterio'
},
];
@Component({
selector: 'app-books',
standalone: true,
templateUrl: './books.component.html',
styleUrl: './books.component.scss',
imports: [BookCardComponent, CommonModule]
})
export class BooksComponent {
books: any;
}
En sí al ejecutarlo no me da ningún error pero no me muestra nada, no se se me faltará algo o si es necesario importar algún módulo para que funcione.