Angular

Angular adapter — provideLayerClient, signals, and imperative renderStack.

@stainless-code/angular-layers bridges stacks into Angular signals, rendered imperatively via renderStack(vcr). The core is re-exported.

Install

npm install @stainless-code/angular-layers

pnpm add @stainless-code/angular-layers

yarn add @stainless-code/angular-layers

bun add @stainless-code/angular-layers

Peer: @angular/core >=17.0.0

Client

Register LAYER_CLIENT with provideLayerClient() in your app config or component providers. Inject with useLayerClient():

import { provideLayerClient, useLayerClient } from "@stainless-code/angular-layers";

export const appConfig = {
  providers: [provideLayerClient()],
};

Render a stack

There is no StackOutlet. Call renderStack(vcr) inside an injection context — it imperatively creates components in a ViewContainerRef, keyed by layer id so state changes update inputs via setInput without recreating instances:

import { Component, ViewContainerRef, inject } from "@angular/core";
import { renderStack } from "@stainless-code/angular-layers";

@Component({
  selector: "app-root",
  template: `<ng-container #outlet />`,
})
export class AppComponent {
  private vcr = inject(ViewContainerRef);

  constructor() {
    renderStack(this.vcr, "confirm");
  }
}

useStack({ stack, select }) returns a readonly Signal — the idiomatic equivalent of StackSubscribe.

Confirm dialog

import { Component, ViewContainerRef, inject } from "@angular/core";
import {
  layerOptions,
  provideLayerClient,
  renderStack,
  injectLayer,
  type LayerComponentProps,
} from "@stainless-code/angular-layers";

type ConfirmPayload = { title: string };
type ConfirmResponse = boolean;

@Component({
  selector: "confirm-dialog",
  template: `
    <div role="dialog">
      <h2>{{ payload.title }}</h2>
      <button (click)="call.end(true)">Yes</button>
      <button (click)="call.end(false)">No</button>
    </div>
  `,
})
class ConfirmDialogComponent {
  call!: LayerComponentProps<ConfirmPayload, ConfirmResponse>["call"];
  payload!: ConfirmPayload;
}

const confirm = layerOptions<ConfirmPayload, ConfirmResponse>({
  stack: "confirm",
  key: ["confirm", "remove"],
  component: ConfirmDialogComponent,
});

@Component({
  selector: "app-root",
  providers: [provideLayerClient()],
  template: `<button (click)="remove()">Remove</button><ng-container #outlet />`,
})
export class AppComponent {
  private c = injectLayer(confirm);
  private vcr = inject(ViewContainerRef);

  constructor() {
    renderStack(this.vcr, "confirm");
  }

  async remove() {
    await this.c.open({ title: "Remove item?" });
  }
}

Primitives

Options bag plus optional trailing LayerClient. Drive with injectLayer(options) (useLayer alias); observe with injectLayerState({ key, … }). Angular-idiomatic aliases: injectStack, injectQueuedStack, injectLayerQueuedState. Must run in an injection context.

Ergonomic APIs

Learn more

• Lifecycle · Identity & types
• Adapter parity