Configuring CardComponent for reuse

Let’s generify CardComponent so it can be reused.

Remove everything and just keep code as below.

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { Card } from './card.model';

@Component({
  selector: 'app-card',
  standalone: true,
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  imports: [CommonModule, MatCardModule, MatButtonModule]
})
export class CardComponent {

  @Input() cards: Card[] = [];
}

// card.component.scss
.card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.card {
    max-width: 400px;
    margin: 5px;
}

<!-- card.component.html -->
<div class="card-container">
  <mat-card class="card" *ngFor="let card of cards">
    <mat-card-header>
      <mat-card-title>{{ card.name }}</mat-card-title>
      <mat-card-subtitle>{{ card.price }}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="card.imageUrl" alt="card">
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

// card.model.ts
export interface Card {
    id: string;
    name: string;
    imageUrl: string;
    price: number;
    description: string;
}