BrowserLanguage

Reactive wrapper around the browser's language preference. Returns a signal that tracks the current language of the browser UI and updates automatically when the user changes their language preference.

Loading demo...

Usage

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

@Component({
  template: `
    <p>Current language: {{ language() }}</p>
  `,
})
export class LanguageDemo {
  readonly language = browserLanguage(); 
  
  constructor() {
    effect(() => {
      console.log('Language changed to:', this.language());
    });
  }
}

Use InjectionToken for Singleton

For global state tracking like browserLanguage, consider using the provided BROWSER_LANGUAGE 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 { BROWSER_LANGUAGE } from '@signality/core';

const language = browserLanguage(); 
const language = inject(BROWSER_LANGUAGE); 

Learn more about Token-based utilities.

Parameters

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

Options

The BrowserLanguageOptions extends Angular's CreateSignalOptions<string> and WithInjector:

Option	Type	Description
initialValue	string	Initial value for SSR (default: '')
equal	ValueEqualityFn<string>	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<string> containing the current browser language in BCP 47 format. Examples:

• 'en-US' - English (United States)
• 'fr-FR' - French (France)
• 'de-DE' - German (Germany)
• 'es-ES' - Spanish (Spain)

The signal automatically updates when the user changes their language preference in the browser settings.

Examples

Display localized content

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

@Component({
  template: `
    <p>{{ greeting() }}</p>
  `,
})
export class LocalizedGreeting {
  readonly language = browserLanguage();
  
  readonly greeting = computed(() => {
    const lang = this.language();
    if (lang.startsWith('fr')) {
      return 'Bonjour!';
    } else if (lang.startsWith('de')) {
      return 'Guten Tag!';
    } else if (lang.startsWith('es')) {
      return '¡Hola!';
    }
    return 'Hello!';
  });
}

Format dates based on language

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

@Component({
  template: `
    <p>{{ formattedDate() }}</p>
  `,
})
export class LocalizedDate {
  readonly language = browserLanguage();
  readonly date = signal(new Date());
  
  readonly formattedDate = computed(() => {
    return new Intl.DateTimeFormat(this.language()).format(this.date());
  });
}

SSR Compatibility

On the server, the signal initializes with the value from initialValue option (defaults to ''). You can provide a custom initial value for SSR:

import { browserLanguage } from '@signality/core';

const language = browserLanguage({
  initialValue: 'en-US',
});

Type Definitions

interface BrowserLanguageOptions extends CreateSignalOptions<string>, 
  WithInjector {
  readonly initialValue?: string;
}

function browserLanguage(options?: BrowserLanguageOptions): Signal<string>;

Related

• Online — Browser online/offline status
• Network — Network connection information

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

PreviousBroadcastChannelNextClipboard