Angular

1
import { ApplicationConfig } from "@angular/core";
2
import { provideSchematic } from "@schematichq/schematic-angular";
3
4
export const appConfig: ApplicationConfig = {
5
  providers: [
6
    provideSchematic({ publishableKey: "your-publishable-key" }),
7
  ],
8
};

1
import { NgModule } from "@angular/core";
2
import { provideSchematic } from "@schematichq/schematic-angular";
3
4
@NgModule({
5
  providers: [
6
    provideSchematic({ publishableKey: "your-publishable-key" }),
7
  ],
8
})
9
export class AppModule {}

1
import { Schematic } from "@schematichq/schematic-angular";
2
3
const client = new Schematic("your-publishable-key", { useWebSocket: true });
4
5
provideSchematic({ client });

1
import { Component, OnInit, inject } from "@angular/core";
2
import { SchematicService } from "@schematichq/schematic-angular";
3
4
@Component({ selector: "app-root", template: `<router-outlet />` })
5
export class AppComponent implements OnInit {
6
  private schematic = inject(SchematicService);
7
8
  ngOnInit() {
9
    this.schematic.identify({
10
      keys: { id: "my-user-id" },
11
      company: {
12
        keys: { id: "my-company-id" },
13
        traits: { location: "Atlanta, GA" },
14
      },
15
    });
16
  }
17
}

1
import { Component, inject } from "@angular/core";
2
import { SchematicService } from "@schematichq/schematic-angular";
3
4
@Component({
5
  selector: "app-usage",
6
  template: `<button (click)="onQuery()">Run Query</button>`,
7
})
8
export class UsageComponent {
9
  private schematic = inject(SchematicService);
10
11
  onQuery() {
12
    this.schematic.track({ event: "query" });
13
  }
14
}

1
this.schematic.track({ event: "query", quantity: 10 });

1
import { Component, inject } from "@angular/core";
2
import { AsyncPipe } from "@angular/common";
3
import { SchematicService } from "@schematichq/schematic-angular";
4
5
@Component({
6
  selector: "app-feature",
7
  standalone: true,
8
  imports: [AsyncPipe],
9
  template: `
10
    @if (isFeatureEnabled$ | async) {
11
      <app-feature />
12
    } @else {
13
      <app-fallback />
14
    }
15
  `,
16
})
17
export class FeatureComponent {
18
  private schematic = inject(SchematicService);
19
  isFeatureEnabled$ = this.schematic.flagValue$("my-flag-key");
20
}

1
import { Component, inject } from "@angular/core";
2
import { toSignal } from "@angular/core/rxjs-interop";
3
import { SchematicService } from "@schematichq/schematic-angular";
4
5
@Component({
6
  selector: "app-feature",
7
  standalone: true,
8
  template: `
9
    @if (isFeatureEnabled()) {
10
      <app-feature />
11
    } @else {
12
      <app-fallback />
13
    }
14
  `,
15
})
16
export class FeatureComponent {
17
  private schematic = inject(SchematicService);
18
  isFeatureEnabled = toSignal(this.schematic.flagValue$("my-flag-key"), {
19
    initialValue: false,
20
  });
21
}

1
import { Component, inject } from "@angular/core";
2
import { AsyncPipe } from "@angular/common";
3
import { SchematicService } from "@schematichq/schematic-angular";
4
5
@Component({
6
  selector: "app-entitlement",
7
  standalone: true,
8
  imports: [AsyncPipe],
9
  template: `
10
    @if (isPending$ | async) {
11
      <app-loader />
12
    } @else if (entitlement$ | async; as entitlement) {
13
      @if (entitlement.featureUsageExceeded) {
14
        <div>
15
          You have used all of your usage
16
          ({{ entitlement.featureUsage }} / {{ entitlement.featureAllocation }})
17
        </div>
18
      } @else if (entitlement.value) {
19
        <app-feature />
20
      } @else {
21
        <app-no-access />
22
      }
23
    }
24
  `,
25
})
26
export class EntitlementComponent {
27
  private schematic = inject(SchematicService);
28
  isPending$ = this.schematic.isPending$();
29
  entitlement$ = this.schematic.entitlement$("my-flag-key");
30
}

1
import { Component, inject } from "@angular/core";
2
import { AsyncPipe } from "@angular/common";
3
import { SchematicService } from "@schematichq/schematic-angular";
4
5
@Component({
6
  selector: "app-plan",
7
  standalone: true,
8
  imports: [AsyncPipe],
9
  template: `
10
    @if (plan$ | async; as plan) {
11
      <div>Current plan: {{ plan.name }}</div>
12
    } @else {
13
      <div>No active subscription</div>
14
    }
15
  `,
16
})
17
export class PlanComponent {
18
  private schematic = inject(SchematicService);
19
  plan$ = this.schematic.plan$();
20
}

1
// Provide a fallback value at the callsite
2
isFeatureEnabled$ = this.schematic.flagValue$("feature-flag", true);
3
4
// Or configure defaults at initialization
5
provideSchematic({
6
  publishableKey: "your-publishable-key",
7
  flagValueDefaults: {
8
    "feature-flag": true,
9
  },
10
});

1
provideSchematic({
2
  publishableKey: "your-publishable-key",
3
  debug: true,
4
});
5
6
// Or via URL parameter
7
// https://yoursite.com/?schematic_debug=true

1
provideSchematic({
2
  publishableKey: "your-publishable-key",
3
  offline: true,
4
});
5
6
// Or via URL parameter
7
// https://yoursite.com/?schematic_offline=true