Creare un Componente Angular per Monitorare lo Stato di Connessione Online/Offline

Immaginate di lavorare su un'applicazione Angular dove è fondamentale sapere se il dispositivo dell’utente è online oppure offline. Magari state sviluppando un’app che salva dati in locale e li sincronizza solo quando c’è rete, oppure volete semplicemente avvisare gli utenti in caso di disconnessione. Bene, oggi vi mostrerò come creare un componente standalone che fa esattamente questo: monitora la connessione di rete e offre un feedback visivo semplice e intuitivo.

Cos’è il Connection Status Component?

Questo componente è una piccola utility visiva: un cerchio che cambia colore a seconda dello stato della connessione del dispositivo. Verde se siamo online, rosso se siamo offline. Semplice? Sì, ma estremamente utile per molti casi d’uso.

Il codice che vedremo sfrutta alcune delle più recenti feature di Angular, come i segnali (signal) per gestire lo stato in modo reattivo e il pattern standalone per creare un componente modulare e indipendente.

Il Codice

Partiamo subito con il codice completo:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { computed, signal } from '@angular/core';

@Component({
  selector: 'app-connection-status',
  template: `
    <div
      [ngStyle]="{ 'background-color': connectionColor() }"
      style="width: 20px; height: 20px; border-radius: 50%;"
    ></div>
  `,
  styles: [],
  standalone: true,
  imports: [CommonModule],
})
export class ConnectionStatusComponent implements OnInit {
  private isConnected = signal(false);

  constructor() {}

  ngOnInit(): void {
    setInterval(() => {
      this.checkConnection();
    }, 1000);
  }

  connectionColor(): string {
    return this.isConnected() ? 'lime' : 'red';
  }

  checkConnection(): void {
    this.isConnected.set(navigator.onLine);
  }
}

Spiegazione Passo per Passo

Standalone e Modulabilità Il componente è dichiarato come standalone (standalone: true) e importa soltanto ciò di cui ha bisogno, in questo caso CommonModule. Questo rende il componente autonomo e facilmente riutilizzabile in qualsiasi applicazione Angular.
Segnali per la Reattività La proprietà isConnected è un segnale, una funzionalità recente di Angular per gestire lo stato reattivo. In questo caso, rappresenta lo stato della connessione (true per online, false per offline) e può essere letto o aggiornato facilmente.
Ciclo di Controllo In ngOnInit, utilizziamo setInterval per verificare la connessione ogni secondo tramite navigator.onLine. È una soluzione semplice ma efficace per monitorare la rete.
Feedback Visivo La funzione connectionColor restituisce il colore (verde o rosso) in base allo stato della connessione. Il binding [ngStyle] applica dinamicamente lo stile al nostro piccolo cerchio, rendendo il componente estremamente intuitivo.

Come Integrarlo

Immaginate di volerlo aggiungere alla vostra dashboard. Ecco un esempio:

import { Component } from '@angular/core';
import { ConnectionStatusComponent } from './connection-status.component';

@Component({
  selector: 'app-dashboard',
  template: `
    <div style="display: flex; align-items: center;">
      <app-connection-status></app-connection-status>
      <span style="margin-left: 10px;">Stato Connessione</span>
    </div>
  `,
  standalone: true,
  imports: [ConnectionStatusComponent],
})
export class DashboardComponent {}

Il componente ConnectionStatusComponent viene integrato senza alcun bisogno di moduli aggiuntivi, rispettando il principio della modularità. Con pochi passaggi, abbiamo un indicatore visivo del nostro stato di connessione.

Possibili Estensioni

Cosa possiamo fare per rendere il componente ancora più utile? Ecco alcune idee:

Usare le computed signals e Tailwind CSS

In questo caso non è necessario mantenere il setInterval per aggiornare una computed signal in Angular. Le computed signals vengono ricalcolate automaticamente quando le loro dipendenze cambiano. Poiché il valore di navigator.onLine è gestito dal browser e cambia dinamicamente, la computed signal rifletterà questi cambiamenti senza bisogno di un timer.

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { computed, signal } from '@angular/core';

@Component({
  selector: 'app-connection-status',
  template: `
    <div class="absolute top-8">
      <div [class]="dotStyle()"></div>
      <div [class]="hoverDotStyle()"></div>
    </div>
  `,
  styles: [],
  standalone: true,
  imports: [CommonModule],
})
export class ConnectionStatusComponent implements OnInit {
  isConnected =computed(()=>navigator.onLine)

  dotOnlineStyle = 'w-4 h-4 rounded-full bg-green-300';
  dotOfflineStyle = 'w-4 h-4 rounded-full bg-red-400';

  dotStyle = computed(() =>
    this.isConnected() ? this.dotOnlineStyle : this.dotOfflineStyle
  );
  hoverDotOnlineStyle =
    'w-4 h-4 absolute top-0 rounded-full bg-green-300 animate-ping';
  hoverDotOfflineStyle = 'w-4 h-4 absolute top-0 rounded-full bg-red-400';
  hoverDotStyle = computed(() =>
    this.isConnected() ? this.hoverDotOnlineStyle : this.hoverDotOfflineStyle
  );
}

Messaggi Informativi Potremmo aggiungere un testo accanto al cerchio per indicare esplicitamente "Online" o "Offline".

<div>
  <div
    [ngStyle]="{ 'background-color': connectionColor() }"
    style="width: 20px; height: 20px; border-radius: 50%;"
  ></div>
  <span>{{ isConnected() ? 'Online' : 'Offline' }}</span>
</div>

Gestione Avanzata della Rete Per applicazioni più complesse, potremmo monitorare non solo la connessione di base, ma anche la velocità di rete o il tipo di connessione utilizzando le API del browser (ad esempio, navigator.connection).

Conclusione

Ecco fatto: con poche righe di codice abbiamo creato un componente semplice, elegante e funzionale. È un ottimo esempio di come Angular possa aiutare a risolvere problemi concreti in modo modulare e riutilizzabile.

Se state sviluppando applicazioni che dipendono dalla rete, un indicatore di connessione è uno strumento indispensabile. E grazie ai segnali e al pattern standalone, integrare questa funzionalità è più semplice che mai. Ora tocca a voi: fatemi sapere come lo avete usato nei vostri progetti!