connection.component.ts

import { Component, ContentChild } from '@angular/core';
import { map } from 'rxjs/operators';

import { ConnectionService } from './connection.service';
import { FastDirective} from './fast.directive';
import { SlowDirective} from './slow.directive';

@Component({
  selector: 'connection',
  template: `
    <ng-template [ngTemplateOutlet]="fast.tpl" *ngIf="isFast| async"></ng-template>
    <ng-template [ngTemplateOutlet]="slow.tpl" *ngIf="!isFast | async"></ng-template>
  `,
})
export class ConnectionComponent {
  isFast$ = this.connection.effectiveTypeWithFallback('4g').pipe(
    map(effectiveType => !/slow-2g|2g|3g/.test(effectiveType)),
  );
  @ContentChild(FastDirective) fast: FastDirective;
  @ContentChild(SlowDirective) slow: SlowDirective;

  constructor(private readonly connection: ConnectionService) {}
}

connection.service.ts

import { Injectable } from '@angular/core';
import { empty, Observable, of } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ConnectionService {
  private static readonly browserSupport =
    navigator.connection && navigator.connection.effectiveType;

  private readonly effectiveType$ =
    (!ConnectionService.browserSupport)
    ? empty()
    : new Observable(observer => {
      const { effectiveType } = navigator.connection;
      observer.next(effectiveType);

      const onConnectionChange = () => {
        const { effectiveType } = navigator.connection;
        observer.next(effectiveType);
      }

      navigator.connection.addEventListener('change', onConnectionChange)

      return () => {
        navigator.connection.removeEventListener('change', onConnectionChange);
      };
    }.pipe(
      shareReplay(1),
    );

  effectiveTypeWithFallback(fallback = 'slow-2g') {
    return (!ConnectionService.browserSupport)
      ? of(fallback)
      : this.effectiveType$;
  }
}