Adaptive Components - Dumb Card Image Component #blog

card-image.component.ts

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-card-image',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <img [alt]="alt" [src]="src" [ngClass]="classes" (load)="ready = true" />
    <span *ngIf="ready && attribution">
      Image by <a [href]="attribution.href">{{ attribution.text }}</a>
    </span>
  `,
})
export class CardImageComponent {
  @Input() alt = '';

  @Input() attribution = {
    href: 'https://unsplash.com',
    text: 'Unsplash',
  };

  @Input() placement: 'top' | 'side' = 'side';

  @Input() src = 'https://picsum.photos/200';

  ready = false;

  get classes(): string {
    return 'card-img-' + this.placement;
  }
}