Integration guide — Angular

End-to-end walkthrough: from getting your API key to a live multiplayer game in your Angular app using @beta-gamer/angular.

Get your API key

Register at beta-gamer.com/register. You'll receive a live key (bg_live_…) and a test key (bg_test_…). Use the test key during development.

⚠️ Never expose your API key in the Angular app. Session creation must happen on your backend server.

Install the SDK

npm install @beta-gamer/angular socket.io-client

Import BetaGamerModule

Add BetaGamerModule to your NgModule imports, or import it directly in a standalone component.

// app.module.ts
import { NgModule } from '@angular/core';
import { BetaGamerModule } from '@beta-gamer/angular';

@NgModule({
  imports: [
    BetaGamerModule,
    // ...
  ],
})
export class AppModule {}

Or in a standalone component:

import { Component } from '@angular/core';
import { BetaGamerModule } from '@beta-gamer/angular';

@Component({
  standalone: true,
  imports: [BetaGamerModule],
  // ...
})
export class GameComponent {}

Create a session on your backend

Call POST /v1/sessions from your server and return the sessionToken to the Angular app.

// Your backend (Node, Express, NestJS, etc.)
const res = await fetch('https://api.beta-gamer.com/v1/sessions', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer bg_live_xxxx',  // server-side only
    'Content-Type':  'application/json',
  },
  body: JSON.stringify({
    game:      'chess',
    matchType: 'matchmaking',
    players:   [{ id: user.id, displayName: user.name }],
  }),
});
const { sessionToken } = await res.json();
// return sessionToken to your Angular frontend

Initialise BetaGamerService

Inject BetaGamerService and call init() with the token from your backend. The fourth argument connectSocket controls whether the service opens a shared socket — set it to false when using native board components (they manage their own socket).

Prop / Input	Type	Default	Description
`token`	string	—	JWT session token from your backend.
`serverUrl`	string	—	Base URL of the Beta Gamer server.
`socketPath`	string	"/socket.io"	Socket.IO path. Only change if self-hosting.
`connectSocket`	boolean	true	Set false when using native board components — they open their own socket.

import { Component, OnInit } from '@angular/core';
import { BetaGamerService } from '@beta-gamer/angular';

@Component({ /* ... */ })
export class GameComponent implements OnInit {
  constructor(private svc: BetaGamerService) {}

  ngOnInit() {
    const token = /* token from your route/state */;

    // connectSocket: false — ChessBoard manages its own socket
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);
  }
}

Use a board component

Drop a board component into your template. It handles everything: socket connection, matchmaking, moves, AFK, and game-over.

<!-- chess-game.component.html -->
<div class="game-container">
  <bg-chess-board
    [showAfkWarning]="true"
    (onLeave)="handleLeave()"
  ></bg-chess-board>
</div>

// chess-game.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BetaGamerService } from '@beta-gamer/angular';

@Component({
  selector: 'app-chess-game',
  templateUrl: './chess-game.component.html',
})
export class ChessGameComponent implements OnInit {
  constructor(
    private svc: BetaGamerService,
    private router: Router,
  ) {}

  ngOnInit() {
    const token = history.state.sessionToken;
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);
  }

  handleLeave() {
    this.router.navigate(['/lobby']);
  }
}

Listen to socket events manually (optional)

If you need to react to events outside the board component (e.g. show a custom game-over screen), use svc.socket$.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { BetaGamerService } from '@beta-gamer/angular';

@Component({ /* ... */ })
export class GameComponent implements OnInit, OnDestroy {
  private sub = new Subscription();
  gameOver = false;
  winner: string | null = null;

  constructor(private svc: BetaGamerService) {}

  ngOnInit() {
    this.svc.init(token, 'https://api.beta-gamer.com', '/socket.io', false);

    // Listen to any socket event via the observable
    this.sub.add(
      this.svc.on('game:over').subscribe(({ winner, reason }) => {
        this.gameOver = true;
        this.winner = winner;
      })
    );

    this.sub.add(
      this.svc.on('player:disconnected').subscribe(() => {
        // show reconnect banner
      })
    );
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Available board components

Selector	Game	Inputs	Outputs
`bg-chess-board`	Chess	[showAfkWarning]	(onLeave)
`bg-checkers-board`	Checkers	[showAfkWarning]	(onLeave)
`bg-connect4-board`	Connect 4	[showAfkWarning]	(onLeave)
`bg-tictactoe-board`	Tic-tac-toe	[showAfkWarning]	(onLeave)

See the per-game Angular reference pages in the sidebar for full input/output documentation.

✅ That's it. For game-specific socket events see Chess, Checkers, Connect 4, or Tic-tac-toe.

Beta Gamer GaaS API — questions? support@beta-gamer.com