@durgarao1208/dynamic-ui-angular

The Angular adapter for Dynamic UI. It connects one element of your application to a presentation session so that theme, tokens, branding and layout can change at runtime without touching your routes, forms, state or business logic. Optional entry points add an application frame (shell) and everyday components styled from the same tokens.

Requires Angular 22 (@angular/core and @angular/common ^22.2.1) and @durgarao1208/dynamic-ui-core. The optional presets live in @durgarao1208/dynamic-ui-themes.

npm install @durgarao1208/dynamic-ui-angular @durgarao1208/dynamic-ui-core @durgarao1208/dynamic-ui-themes

Entry points

| Import | What it provides | | --- | --- | | @durgarao1208/dynamic-ui-angular | DuiRootDirective and createPresentationController: one application-owned root with signals for state, apply, rollback, separate preview, context update and reduced decoration. Token, layout and asset participants. createDevicePreference and followDevicePreference to follow the device's light or dark setting. | | @durgarao1208/dynamic-ui-angular/shell | DuiShellComponent (header, navigation, main and footer regions, sidebar or top navigation, skip link) and DuiBrandComponent. Optional. | | @durgarao1208/dynamic-ui-angular/components | Button, text field, input and checkbox/radio directives, card, table, dialog, tabs, badge, progress, empty state and toast. Optional; each works on its own and takes its look from the tokens. |

The base entry never loads the shell or the components.

Example

import { Component, afterNextRender, viewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DuiRootDirective } from '@durgarao1208/dynamic-ui-angular';
import { DuiShellComponent } from '@durgarao1208/dynamic-ui-angular/shell';
import { createContrastSafety } from '@durgarao1208/dynamic-ui-core';
import { createFallbackPlan, createHostContext, createPresentation } from '@durgarao1208/dynamic-ui-themes';

@Component({
  selector: 'app-root',
  imports: [DuiRootDirective, DuiShellComponent, RouterOutlet],
  template: `
    <div duiRoot [duiContext]="context" [duiFallback]="fallback" [duiSafety]="safety">
      <dui-shell navLabel="Main">
        <h1 duiHeader>My application</h1>
        <ul duiNavigation><li>Home</li><li>Settings</li></ul>
        <router-outlet />
      </dui-shell>
    </div>`
})
export class AppComponent {
  readonly context = createHostContext({ instanceId: 'my.app', navigation: ['home', 'settings'] });
  readonly fallback = createFallbackPlan(this.context);
  readonly safety = createContrastSafety();
  private readonly root = viewChild.required(DuiRootDirective);

  constructor() {
    afterNextRender(() => void this.root().controller.apply(createPresentation({ theme: 'dark', layout: 'sidebar' })));
  }
}

apply returns either a rejection with a diagnostic or an outcome. A rejected or failed change leaves the current appearance in place. rollback re-checks the earlier appearance against today's rules before restoring it.

Good to know

• Your application owns content, routes, state and authorization. Hiding something through presentation is not access control.
• Reduced motion and reduced decoration (content marked data-dui-decorative) are supported.
• Only Chrome has been tested so far, and there is no Angular Material adapter yet.
• Semantic versioning applies. A breaking change needs a new major version.

License

MIT