<p>Viewport breakpoint: {{ breakpoint() }}</p>

<h4>Creating a responsive host using the host directive</h4>

<app-container data-sky-id="container-w-host-directive" />

<h4>Creating a responsive host using the directive attribute</h4>

<div
  #hostRef="skyResponsiveHost"
  class="my-container"
  data-sky-id="container-w-attr"
  skyResponsiveHost
>
  <p>Breakpoint within container: {{ hostRef.breakpointChange | async }}</p>
</div>

<h4>Creating a responsive host that wraps embedded views</h4>

<p>
  The responsive host's injector must be passed to the embedded view manually.
</p>

<app-container #responsiveHost="skyResponsiveHost">
  <ng-container
    [ngTemplateOutlet]="myTemplate"
    [ngTemplateOutletInjector]="responsiveHost.injector"
  />
</app-container>

<ng-template #myTemplate>
  <app-child />
</ng-template>
