Integrations

Angular Integration

The Angular adapter provides an NgModule you can import into any Angular application to get access to all design system components.

Installation

Terminalbash

npm install @org/design-system

Import the design system module

Import DesignSystemModule into your root AppModule (or any feature module where you want to use components):

app.module.tsts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DesignSystemModule } from '@org/design-system/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DesignSystemModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

For standalone Angular components (Angular 14+), use imports: [DesignSystemModule] in the component decorator instead.

Import tokens

Add the CSS import to your angular.json styles array or global stylesheet:

angular.json (excerpt)json

"styles": [
  "src/styles.css",
  "node_modules/@org/design-system/css/index.css"
]

Standalone components (Angular 14+)

If you're using Angular's standalone component model, add DesignSystemModule to the component's imports array instead of an NgModule:

app.component.ts (standalone)ts

// app.component.ts (standalone)
import { Component } from '@angular/core';
import { DesignSystemModule } from '@org/design-system/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DesignSystemModule],
  templateUrl: './app.component.html',
})
export class AppComponent {}

Use components in templates

app.component.htmlhtml

<ds-badge variant="success">Live</ds-badge>
<ds-button variant="primary" (click)="deploy()">Deploy now</ds-button>

app.component.tsts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  deploy() {
    // handle deployment
  }
}

Staying up to date

Every merge to main in Studio publishes a new versioned npm package automatically. To pull in the latest version:

Terminalbash

npm update @org/design-system

Use a caret range in your package.json so patch and minor updates apply automatically on the next install:

package.json (excerpt)json

{
  "dependencies": {
    "@org/design-system": "^1.0.0"
  }
}

Switching modes

To switch between light, dark, or any custom mode, set the data-theme attribute on the document element. A simple injectable service keeps the current mode as state and updates the DOM in one place, so any component can trigger a switch without knowing about the DOM directly:

theme.service.tsts

// theme.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private current: 'light' | 'dark' = 'light';

  toggle(): void {
    this.current = this.current === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', this.current);
  }

  get theme(): 'light' | 'dark' {
    return this.current;
  }
}

Next steps

Want to use your design system in plain HTML without a build step? See Web Components.

Web Components →