Cover component that can be used in views, whereby the parent component can supply a coverUrl through data binding as well as configured classes in a binded array

cover.component.html

<div [class]="coverClass">
  <div [ngClass]="isMobile ? 'cover-title mobile' : 'cover-title' ">
    <ng-content select="[cover]"></ng-content>
    <!-- 
      To add new content on top, use <div cover> ...content... </div> in parent component
     -->
  </div>
  <img [src]="coverUrl" alt="" style="object-position: 50% 50%;">
</div>

cover.component.scss

.cover {
  display: block;
  height: 100vh;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-image: linear-gradient(to bottom right, black, grey);
  font-weight: 300;

  img {
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }

  &.height-20 {
    height: 20vh;
    .cover-title {
      padding-top: 5rem;
    }
  }

  &.height-30 {
    height: 30vh;
    .cover-title {
      padding-top: 5rem;
    }
  }

  &.height-40 {
    height: 40vh;
    .cover-title {
      padding-top: 5rem;
    }
  }
  &.height-50 {
    height: 50vh;
    .cover-title {
      padding-top: 5rem;
    }
  }
  &.height-70 {
    height: 70vh;
    .cover-title {
      padding-top: 5rem;
    }
  }


  &.tinted {
    img {
      opacity: 0.55;
    }

    &.more-tint {
      img {
        opacity: 0.15;
      }
    }
  }
}


.cover-title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  letter-spacing: -0.05rem;
  z-index: 2;
  max-width: 50%;
  margin: auto;

  &.mobile {
    font-size: 1.8rem;
    max-width: 90%;
    margin: auto;
  }
}

cover.component.ts

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

import { BREAKPOINT_NAME } from '@enums/viewport.enum';
import { LayoutService } from '@services/layout.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-cover',
  templateUrl: './cover.component.html',
  styleUrls: ['./cover.component.scss']
})
export class CoverComponent implements OnInit, OnDestroy {
  @Input() coverClass = ['cover'];
  @Input() coverUrl = 'https://www.nasa.gov/images/content/721020main_heic1301a.jpg';

  isMobile: boolean;
  private sub = new Subscription();
  constructor(
    private layout: LayoutService
  ) { }

  ngOnInit(): void {
    this.sub.add(this.layout.whenViewChanges().subscribe(_ => {
      if (this.layout.observesBreakpointsOf(BREAKPOINT_NAME.mobile)) {
        this.isMobile = true;
      } else {
        this.isMobile = false;
      }
    }));
  }

  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
}