Online

Reactive wrapper around the browser's online/offline status. Returns a signal that tracks whether the browser is currently online or offline.

Loading demo...

Usage

import { Component, effect } from '@angular/core';
import { online } from '@signality/core';

@Component({
  template: `
    <p [class.offline]="!isOnline()">
      {{ isOnline() ? '🟢 Online' : '🔴 Offline' }}
    </p>
  `,
})
export class OnlineStatus {
  readonly isOnline = online(); 
}

Use InjectionToken for Singleton

For global state tracking like online, consider using the provided ONLINE token instead of calling the function directly. This provides a singleton instance that can be shared across your entire application, reducing memory usage and event listener overhead:

import { inject } from '@angular/core';
import { ONLINE } from '@signality/core';

const isOnline = online(); 
const isOnline = inject(ONLINE); 

Learn more about Token-based utilities.

Parameters

Parameter	Type	Description
options	OnlineOptions	Optional configuration (see Options below)

Options

The OnlineOptions extends Angular's CreateSignalOptions<boolean> and WithInjector:

Option	Type	Description
equal	ValueEqualityFn<boolean>	Custom equality function (see more)
debugName	string	Debug name for the signal (development only)
injector	Injector	Optional injector for DI context

Return Value

Returns a Signal<boolean> containing the current online status:

• true - Browser is online
• false - Browser is offline

Examples

Offline banner

import { Component, computed } from '@angular/core';
import { online } from '@signality/core';

@Component({
  template: `
    @if (!isOnline()) {
      <div class="offline-banner">
        <p>⚠️ You are currently offline. Some features may be unavailable.</p>
      </div>
    }
  `,
})
export class OfflineBanner {
  readonly isOnline = online();
}

Disable form when offline

import { Component } from '@angular/core';
import { online } from '@signality/core';

@Component({
  template: `
    <form [disabled]="!isOnline()">
      <input type="text" placeholder="Enter your name" />
      <button type="submit" [disabled]="!isOnline()">
        Submit
      </button>
    </form>
    @if (!isOnline()) {
      <p class="warning">Form is disabled while offline</p>
    }
  `,
})
export class OfflineForm {
  readonly isOnline = online();
}

Queue actions when offline

import { Component, effect, signal } from '@angular/core';
import { online } from '@signality/core';

@Component({
  template: `
    <p>Queued actions: {{ queuedActions().length }}</p>
    <button (click)="addAction()">Add Action</button>
    <button (click)="processQueue()" [disabled]="!isOnline()">
      Process Queue
    </button>
  `,
})
export class ActionQueue {
  readonly isOnline = online();
  readonly queuedActions = signal<string[]>([]);

  constructor() {
    effect(() => {
      if (this.isOnline() && this.queuedActions().length > 0) {
        this.processQueue();
      }
    });
  }

  addAction() {
    this.queuedActions.update(actions => [...actions, `Action ${Date.now()}`]);
  }

  processQueue() {
    // Process queued actions
    this.queuedActions.set([]);
  }
}

SSR Compatibility

On the server, the signal initializes with true.

Type Definitions

type OnlineOptions = CreateSignalOptions<boolean> & WithInjector;

function online(options?: OnlineOptions): Signal<boolean>;

Related

• Network — Comprehensive network information including connection type and speed

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousNetworkNextPageVisibility