Adaptive Components - Not-So-Dumb Card Image Component #blog

card-image.component.ts

import {
  ChangeDetectionStrategy,
  Component,
  Input,
  Optional,
} from '@angular/core';
import { CardVerticalComponent } from './card-vertical.component';

@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() src = 'https://picsum.photos/200';
  
  ready = false;
  
  classes = `card-img-${this.vertical ? "top" : "side"}`;

  constructor(@Optional() public vertical: CardVerticalComponent) {}
}