Angular

Use the common ssgoi directive above the changing page region. The optional Angular Router directive supplies each page’s boundary.

Setup

import { Component, signal } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { Ssgoi, type SsgoiConfig } from "@ssgoi/angular";
import { drill } from "@ssgoi/angular/view-transitions";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, Ssgoi],
  template: `
    <main
      ssgoi
      [config]="config()"
      style="position:relative;z-index:0;min-height:100dvh;overflow-x:clip"
    >
      <router-outlet />
    </main>
  `,
})
export class AppComponent {
  protected readonly config = signal<SsgoiConfig>({
    transitions: [
      { on: "/posts/**", except: "/posts", transition: drill() },
    ],
  });
}

Angular Router

Experimental API

A structural directive marks a page’s real DOM root and recreates its embedded view when its route key changes. The application keeps its RouterOutlet.

Agent guide

Connect a routed page

Import the standalone directive in the routed component. The template must have exactly one DOM root. This also handles parameter changes that reuse the same route component.

import { Component } from "@angular/core";
import { SsgoiRouteBoundary } from "@ssgoi/angular/router";

@Component({
  standalone: true,
  imports: [SsgoiRouteBoundary],
  template: `
    <article *ssgoiRouteBoundary="let boundary">
      {{ boundary.id }}
    </article>
  `,
})
export class PageComponent {}

Persistent shells

Use *ssgoiRouteBoundary="let boundary; key: 'shell'" to preserve the embedded view. A resolver can return { id, key? }. Query-only and cancelled navigation preserve the default view. This helper does not coordinate custom RouteReuseStrategy caches, detached outlets, or auxiliary outlet transitions.

The helpers connect your router to the common implementation. Route boundaries explains how to connect another router directly. Transitions and route rules apply across the web frameworks.