MtxCard Component Overview

The mtx-card component is a versatile and customizable card component built on top of Angular Material 18. It extends the functionality of the standard Angular Material card, allowing for additional customization and features. The component is designed to be flexible and easy to use, providing a wide range of options for displaying content in a card format.

Features

• Custom Templates: Supports custom templates for the header, content, and footer sections.
• Image and Media Support: Allows adding an image or media section to the card.
• Configurable Elevation: Multiple elevation levels to control the card's shadow.
• Selectable and Expandable States: Cards can be selectable and expandable.
• Ribbons and Badges: Supports adding ribbons or badges to the card.
• Custom Classes: Apply custom CSS classes to the card.
• Loading State: Display a loading spinner overlay on the card.
• Single Config Input: All configurations are handled through a single config input.

Basic Card

A basic card with only content can be created using the mtx-card component:

<mtx-card [config]="{ contentTemplate: content }">
  <ng-template #content>
    <p>This is a basic card with only content.</p>
  </ng-template>
</mtx-card>

Card with Header, Content, and Footer

The mtx-card component allows you to define custom templates for the header, content, and footer:

<mtx-card [config]="{ headerTemplate: header, contentTemplate: content, footerTemplate: footer }">
  <ng-template #header>
    <mat-card-header>
      <mat-card-title>Card Title</mat-card-title>
      <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
    </mat-card-header>
  </ng-template>
  <ng-template #content>
    <p>This is the card content.</p>
  </ng-template>
  <ng-template #footer>
    <button mat-button>Action</button>
  </ng-template>
</mtx-card>

Card with Image

You can add an image to the card using the imageSrc property in the config:

<mtx-card [config]="{ imageSrc: 'path/to/image.jpg', contentTemplate: content }">
  <ng-template #content>
    <p>This is the card content with an image.</p>
  </ng-template>
</mtx-card>

Selectable and Expandable Card

The card can be made selectable and expandable with the selectable and expandable properties:

<mtx-card [config]="{ selectable: true, expandable: true, contentTemplate: content }">
  <ng-template #content>
    <p>This card is selectable and expandable. Click the expand button to toggle the content.</p>
  </ng-template>
</mtx-card>

Card with Ribbon

Add a ribbon to the card using the ribbonText property:

<mtx-card [config]="{ ribbonText: 'New', contentTemplate: content }">
  <ng-template #content>
    <p>This card has a ribbon.</p>
  </ng-template>
</mtx-card>

Config Options

The mtx-card component takes a single config input with the following options:

• headerTemplate: Template for the card header.
• contentTemplate: Template for the card content.
• footerTemplate: Template for the card footer.
• imageSrc: Source URL for the card image.
• elevation: Elevation level of the card (default is 1).
• selectable: Whether the card is selectable (default is false).
• expandable: Whether the card is expandable (default is false).
• expanded: Whether the card is expanded (default is false).
• ribbonText: Text for the ribbon.
• customClasses: Custom CSS classes to apply to the card (default is '').
• loading: Whether the card is in a loading state (default is false).

Examples

Basic Card

<mtx-card [config]="{ contentTemplate: content }">
  <ng-template #content>
    <p>This is a basic card with only content.</p>
  </ng-template>
</mtx-card>

Card with Header, Content, and Footer

<mtx-card [config]="{ headerTemplate: header, contentTemplate: content, footerTemplate: footer }">
  <ng-template #header>
    <mat-card-header>
      <mat-card-title>Card Title</mat-card-title>
      <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
    </mat-card-header>
  </ng-template>
  <ng-template #content>
    <p>This is the card content.</p>
  </ng-template>
  <ng-template #footer>
    <button mat-button>Action</button>
  </ng-template>
</mtx-card>

Card with Image

<mtx-card [config]="{ imageSrc: 'path/to/image.jpg', contentTemplate: content }">
  <ng-template #content>
    <p>This is the card content with an image.</p>
  </ng-template>
</mtx-card>

Selectable and Expandable Card

<mtx-card [config]="{ selectable: true, expandable: true, contentTemplate: content }">
  <ng-template #content>
    <p>This card is selectable and expandable. Click the expand button to toggle the content.</p>
  </ng-template>
</mtx-card>

Card with Ribbon

<mtx-card [config]="{ ribbonText: 'New', contentTemplate: content }">
  <ng-template #content>
    <p>This card has a ribbon.</p>
  </ng-template>
</mtx-card>

Installation

npm install @angular/material

Import the Module

import { CardModule } from './path/to/Card.module';

@NgModule({
  imports: [
    // other imports...
    CardModule
  ]
})
export class AppModule { }

Summary

The mtx-card component provides an enhanced and flexible card component for Angular applications, making it easy to create rich, interactive card-based UIs with customizable templates and features.