Adaptive Components - Card Components and How They Are Consumed #blog

abstract-card.ts

import { ContentChild, ElementRef, Input } from '@angular/core';
import { CardTitleComponent } from './card-title.component';

export abstract class AbstractCard {
  @Input() action = () => {};

  @Input() color = 'primary';
}

app.component.ts

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  template: `
    <app-card-horizontal [color]="cardColor" [action]="cardAction">
      <app-card-image [src]="cardImgH"></app-card-image>
      <app-card-title>{{ cardTitle }}</app-card-title>
      {{ cardText }}
      <app-card-button>{{ cardCTA }}</app-card-button>
    </app-card-horizontal>

    <app-card-vertical [color]="cardColor" [action]="cardAction">
      <app-card-image [src]="cardImgV"></app-card-image>
      <app-card-title>{{ cardTitle }}</app-card-title>
      {{ cardText }}
      <app-card-button>{{ cardCTA }}</app-card-button>
    </app-card-vertical>
  `,
})
export class AppComponent {
  cardAction = () => (this.document.location.href = 'https://unsplash.com');

  cardColor = 'success';
  
  cardCTA = 'Temporibus, dolores!';
  
  cardImgH = 'https://picsum.photos/192';
  
  cardImgV = 'https://picsum.photos/286';
  
  cardText = 'Dolorum earum nam sed, laborum ratione vitae voluptate ea quasi libero?';
  
  cardTitle = 'Lorem ipsum';

  constructor(@Inject(DOCUMENT) private document: Document) {}
}

card-horizontal.component.ts

import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
import { AbstractCard } from './abstract-card';

@Component({
  selector: 'app-card-horizontal',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="d-none d-sm-block col-sm-auto">
          <ng-content select="app-card-image"></ng-content>
        </div>
        <div class="col">
          <div class="card-body">
            <ng-content select="app-card-title"></ng-content>
            <p class="card-text"><ng-content></ng-content></p>
            <ng-content select="app-card-button"></ng-content>
          </div>
        </div>
      </div>
    </div>
  `,
  providers: [
    {
      provide: AbstractCard,
      useExisting: CardHorizontalComponent,
    },
  ],
})
export class CardHorizontalComponent extends AbstractCard {}

card-vertical.component.ts

import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
import { AbstractCard } from './abstract-card';

@Component({
  selector: 'app-card-vertical',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="card" [style.width.rem]="width">
      <ng-content select="app-card-image"></ng-content>
      <div class="card-body">
        <ng-content select="app-card-title"></ng-content>
        <p class="card-text"><ng-content></ng-content></p>
        <ng-content select="app-card-button"></ng-content>
      </div>
    </div>
  `,
  providers: [
    {
      provide: AbstractCard,
      useExisting: CardVerticalComponent,
    },
  ],
})
export class CardVerticalComponent extends AbstractCard {
  width = 18;
}