Angular SDK

A library for integrating Squid with an Angular application.

SDK Version

Latest stable

Features

• Angular module and provider for initializing and injecting the Squid Client SDK

Getting started

Requirements

This SDK only supports the actively supported versions of Angular as stated in the Angular documentation. Whilst other versions might be compatible they are not actively supported.

Installation

Using npm:

npm install @squidcloud/angular

Configuring Squid

Create an Application using the Squid Console.

• In your Angular root module, import the SquidModule and configure it with your Squid application ID and region:

import { SquidModule } from '@squidcloud/angular';
// ...
@NgModule({
  // ...
  imports: [
    SquidModule.forRoot({
      appId: '<YOUR_APP_ID>',
      region: '<YOUR_SQUID_REGION>',
    }),
  ],
// ...

The above will provide a Squid instance that you can inject in different services and components of your application.

Alternatively, you can provide the Squid instance using a factory function:

• Import the Squid class and the Squid factory provider:

import { provideSquid } from '@squidcloud/angular';
import { Squid } from '@squidcloud/client';

• Add the provideSquid provider to your application's providers:

@NgModule({
  // ...
 providers: [
  {
     provide: Squid,
     useFactory: provideSquid({
       appId: '<YOUR_APP_ID>',
       region: '<YOUR_SQUID_REGION>',
     }),
    deps: [NgZone],
  },
],
// ...

This configuration enables you to create more than one instance of Squid in the same Angular application. For example, you can create two Squid instances in your Angular application:

export const usersSquidInjectionToken = new InjectionToken<Squid>('usersSquid');
export const billingSquidInjectionToken = new InjectionToken<Squid>('billingSquid');

@NgModule({
  // ...
 providers: [
  {
     provide: usersSquidInjectionToken,
     useFactory: provideSquid({
       appId: '<YOUR_APP_ID>',
       region: '<YOUR_SQUID_REGION>',
     }),
    deps: [NgZone],
  },
   {
     provide: billingSquidInjectionToken,
     useFactory: provideSquid({
       appId: '<YOUR_OTHER_APP_ID>',
       region: '<YOUR_OTHER_SQUID_REGION>',
     }),
     deps: [NgZone],
   },
 ],
// ...

Use the Squid client in your Angular component

import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
})
export class MyComponent {
  constructor(private readonly squid: Squid) {}
  // ...
}

Use the Squid client in your Angular service

import { Injectable } from '@angular/core';
import { Squid } from '@squidcloud/client';

@Injectable({ providedIn: 'root' })
export class MyService {
  constructor(private readonly squid: Squid) {}
  // ...
}

Alternatively, you can inject the Squid instance using an injection token in case it was provided using a token:

import { Injectable, Inject } from '@angular/core';
import { Squid } from '@squidcloud/client';
import { usersSquidInjectionToken } from './my.module';

@injectable({ providedIn: 'root' })
export class MyService {
  constructor(@Inject(usersSquidInjectionToken) private readonly usersSquid: Squid) {}
  // ...
}

A full working example of a component using Squid:

import { Component } from '@angular/core';
import { Squid } from '@squidcloud/client';
import { map } from 'rxjs';

// Define your type
type User = { id: string; email: string; age: number };

@Component({
  selector: 'my-component',
  template: `
    <ul>
      <li *ngFor="let user of users | async">
        {{ user.email }}
      </li>
    </ul>
    <br />
    <button (click)="createNewUser()">Create user</button>
  `,
})
export class MyComponent {
  // Subscribe to data
  users = this.squid.collection<User>('Users').query().gt('age', 18).dereference().snapshots();

  constructor(private readonly squid: Squid) {}

  // Insert data
  async createNewUser(): Promise<void> {
    const userId = crypto.randomUUID();
    const email = `${userId}@gmail.com`;
    await this.squid
      .collection<User>('Users')
      .doc(userId)
      .insert({
        id: userId,
        email,
        age: Math.floor(Math.random() * 100),
      });
  }
}