Angular Integration

Angular Integration

Setup

1. Install

npm install @bnotk/dsx

2. Add CSS to angular.json

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@bnotk/dsx/css/index.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

3. Use CUSTOM_ELEMENTS_SCHEMA

Every component using dsx Web Components must declare the schema:

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

@Component({
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `...`
})
export class MyComponent {}

4. Import Components

Import the Web Components you need (registration is automatic):

import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';

Patterns

Property Binding

Angular’s [property] binding works with Lit properties:

<dsx-table [columns]="myColumns" [rows]="myRows" sortable></dsx-table>

Event Handling

Web Components fire CustomEvents. Access data via $event.detail:

<dsx-table (dsx-row-click)="onRowClick($event)"></dsx-table>

onRowClick(event: CustomEvent) {
  const row = event.detail.row;
  console.log('Clicked:', row);
}

Two-Way Binding (Manual)

Since [(ngModel)] doesn’t work with custom elements, use one-way binding + events:

<dsx-datepicker [value]="date" (dsx-change)="date = $any($event).detail.value">
</dsx-datepicker>

Boolean Attributes

Boolean properties can be set as attributes:

<!-- These are equivalent -->
<dsx-dialog [open]="true"></dsx-dialog>
<dsx-dialog open></dsx-dialog>

Full Example

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';
import '@bnotk/dsx/components/datepicker.js';

@Component({
  selector: 'app-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <h1 class="dsx-h2">Demo Page</h1>

    <div class="dsx-field">
      <label class="dsx-field__label">Pick a date</label>
      <dsx-datepicker
        [value]="selectedDate"
        (dsx-change)="selectedDate = $any($event).detail.value">
      </dsx-datepicker>
    </div>

    <dsx-table
      [columns]="columns"
      [rows]="filteredRows"
      sortable
      column-toggle
      (dsx-row-click)="openDetail($any($event).detail.row)">
    </dsx-table>

    <dsx-dialog #confirmDialog heading="Confirm" size="sm">
      <p slot="body">Are you sure?</p>
      <div slot="footer">
        <button class="dsx-btn dsx-btn--secondary" (click)="confirmDialog.close()">No</button>
        <button class="dsx-btn dsx-btn--primary" (click)="confirm()">Yes</button>
      </div>
    </dsx-dialog>
  `
})
export class DemoComponent {
  selectedDate = '';
  columns = [
    { id: 'name', label: 'Name', resizable: true },
    { id: 'status', label: 'Status' },
  ];
  filteredRows = [
    { name: 'Task A', status: 'Done' },
    { name: 'Task B', status: 'Pending' },
  ];

  openDetail(row: any) {
    console.log('Selected:', row);
  }

  confirm() {
    // handle confirmation
  }
}