Adaptive Components - Using :host-context Selector to Set a Style Based on Context #blog

card-title.component.ts

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

@Component({
  selector: 'app-card-title',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h5 class="card-title">
      <ng-content></ng-content>
    </h5>
  `,
  styles: [
    `
      :host-context(app-card-horizontal) h5 {
        border-bottom: 1px solid #eee;
      }
    `,
  ],
})
export class CardTitleComponent {}