Angular

@drm/multitabs-angular follows Angular conventions with a standalone component, a main service for tab state, and a dedicated reload service.

Install

Install the Angular package in your app.

pnpm add @drm/multitabs-angular

Basic usage

Import the standalone component into your shell and render it above the router outlet.

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { MultiTabsComponent } from "@drm/multitabs-angular";

@Component({
  selector: "app-shell",
  standalone: true,
  imports: [RouterOutlet, MultiTabsComponent],
  template: `
    <drm-multi-tabs />
    <router-outlet />
  `,
})
export class AppShellComponent {}

Services

Use MultiTabsService to inspect tabs or trigger actions from elsewhere in the shell.

import { inject } from "@angular/core";
import { MultiTabsService } from "@drm/multitabs-angular";

const tabs = inject(MultiTabsService);

tabs.closeAllTabs();

Use TabReloadService to watch or bump reload signals for tab containers.

Next steps

• Review the getting started guide.
• Compare the Vue API.