Angular (17+)

Use the standalone TrueLinkDirective.

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { TrueLinkDirective } from "true-link/angular";

@Component({
    selector: "app-network-status",
    standalone: true,
    imports: [CommonModule, TrueLinkDirective],
    template: `
    <div [trueLink]="{ pingUrl: '/health' }" #tl="trueLink" style="padding:12px;border:1px solid #ddd;">
      <ng-container *ngIf="tl.snap()() as v">
        <div>Online: {{ v.isOnline }}</div>
        <div>Strength: {{ v.strength }}</div>
        <div>Latency: {{ v.latency ?? 'n/a' }}ms</div>
      </ng-container>
    </div>
  `,
})
export class NetworkStatusComponent {}

If this library helps, you can support development.