@flusys/ng-layout

Application shell for the FLUSYS Angular platform — topbar, sidebar, menu, and signal-based layout state management.

Installation

npm install @flusys/ng-layout @flusys/ng-core @flusys/ng-shared

1. Set Up the Layout Route

Use AppLayout as the parent route component. All authenticated pages become children.

// app.routes.ts
import { Routes } from '@angular/router';
import { AppLayout } from '@flusys/ng-layout';

export const routes: Routes = [
  {
    path: '',
    component: AppLayout,
    children: [
      { path: 'dashboard', loadComponent: () => import('./pages/dashboard.component') },
      { path: 'products',  loadComponent: () => import('./pages/product-list.component') },
    ],
  },
  {
    path: 'auth',
    loadChildren: () => import('./pages/auth/auth.routes'),
  },
];

2. LayoutService — Reading and Updating Layout State

import { LayoutService } from '@flusys/ng-layout';

@Component({ ... })
export class MyComponent {
  private readonly layout = inject(LayoutService);

  // Read signals
  readonly isDark    = this.layout.isDarkTheme;  // Signal<boolean>
  readonly isTopbar  = this.layout.isTopbar;     // Signal<boolean>
  readonly isOverlay = this.layout.isOverlay;    // Signal<boolean>
  readonly menu      = this.layout.menu;         // Signal<IMenuItem[]> — permission-filtered

}

To push user/company profile into the topbar (done automatically by ng-auth's bridge service):

3. Integration Tokens — Auth, Notifications, Language

Connect feature packages to the layout via injection tokens. Register them in app.config.ts.

import { provideAuthLayoutIntegration } from '@flusys/ng-auth';
import { provideNotificationProviders }  from '@flusys/ng-notification';
import { provideLocalization }           from '@flusys/ng-localization';

export const appConfig: ApplicationConfig = {
  providers: [
    ...provideAuthLayoutIntegration(), // topbar user profile + logout
    ...provideNotificationProviders(), // topbar notification bell
    ...provideLocalization({ ... }),   // topbar language selector
  ],
};

The layout reads these tokens to render topbar slots without directly importing feature packages.

4. Clear Persisted Layout

import { LayoutPersistenceService } from '@flusys/ng-layout';

inject(LayoutPersistenceService).clear(); // removes flusys.layout.config from localStorage

License

MIT © FLUSYS