HoverComponent.html

<!-- use with image //-->
<HoverComponent [imageUrl]="url">
  <div class="article-info">
    <time>{{date}}</time>
    <h1>{{title}}</h1>
  </div>
</HoverComponent>

<!-- use with video //-->
<HoverComponent (onHover)="video.play()">
  <!-- this is named ng-content //-->
  <div class="video" background >
    <video #video></video>
  </div>
  <div class="article-info">
    <time>{{date}}</time>
    <h1>{{title}}</h1>
  </div>
</HoverComponent>

<!-- template //-->
<section
  on-mouseover="hover = true; triggerHover()"
  on-mouseleave="hover = false"
  [class.hover]="hover"
  (click)="handleClick()"
  [ngStyle]="{'background-image': 'url(' + imageUrl + ')'}"
>
  <!-- we left imageUrl so we don't have to change alot //-->
  <div class="background-wrapper" *ngIf="!imageUrl">
     <ng-content select="[background]"></ng-content>
  </div>
  <div class="basic-info">
    <ng-content></ng-content>
  </div>
  <div class="block-overlay"></div>
</section>

TileHoverComponent.html

<!-- template //-->
<HoverComponent *mediaIf="'only desktop'">(...)</HoverComponent>
<other-hover-html *mediaIf="'not desktop'">(...)</other-hover-html>

<!-- use  //-->
<TileHoverComponent>
  <div class="video" background >
    <video #video></video>
  </div>
  <div class="article-info">
    <time>{{date}}</time>
    <h1>{{title}}</h1>
  </div>
</TileHoverComponent>