Adaptive Components - Using Properties on Parent Component in Angular #blog

card-button.component.ts

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

@Component({
  selector: 'app-card-button',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button class="btn" [ngClass]="classes" (click)="parent.action()">
      <ng-content></ng-content>
    </button>
  `,
})
export class CardButtonComponent {
  private horizontal = this.parent instanceof CardHorizontalComponent;

  get classes(): string {
    return this.horizontal
      ? `btn-link text-${this.parent.color} text-left p-0`
      : `btn-${this.parent.color} btn-block mt-4`;
  }

  constructor(public parent: AbstractCard) {}
}