Angular: Getting Started

Prerequisites

• - Node.js 20+ and npm/pnpm/yarn.
• - A project scaffold for your framework (Vite, Next.js, Angular CLI, or Vue tooling).
• - Basic familiarity with custom-element event handling.

Step 1: Install Packages

Install the required package set for this framework integration.

npm install @diwacopilot/components @diwacopilot/components-angular

Step 2: Register and Initialize

Register components once at app startup so every page can render Diwa elements correctly.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DButton } from '@diwacopilot/components-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DButton],
  template: '<d-button variant="primary">Save</d-button>',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}

Step 3: Render Your First Component

Start with a simple action component to verify styling, registration, and framework rendering.

<d-button variant="primary">Save</d-button>

Step 4: Handle Events

Wire event handling early to validate data flow and interaction behavior in your app.

import { Component } from '@angular/core';
import { DSwitch } from '@diwacopilot/components-angular';

@Component({
  selector: 'app-settings',
  standalone: true,
  imports: [DSwitch],
  template: '
    <d-switch
      label="Email notifications"
      (update)="onSwitchUpdate($event)"
    ></d-switch>
  ',
})
export class SettingsComponent {
  onSwitchUpdate(event: CustomEvent<{ checked: boolean }>) {
    console.log(event.detail.checked);
  }
}

SSR and Testing Notes

• - Angular proxies integrate cleanly with standalone components and OnPush patterns.
• - For SSR/hydration setups, keep browser-only custom-element assumptions behind platform checks.
• - In TestBed, wait for fixture stability and custom-element definition before behavior assertions.

Troubleshooting

• - If templates fail to compile, confirm the Diwa proxy component is listed in imports.
• - If events do not trigger, match the exact custom event name exposed by the component API.
• - If rendered output is static only in tests, ensure the environment supports custom elements.

Next Actions