@dubai-design-system/components-angular

v5.1.1

Published

a day ago

Angular package for Digital Dubai Design System, featuring Angular-compatible web components and modules.

0High
0Medium
0Low

dda-saleh

cx-lab

Angular bindings for the Dubai Design System web components.

Setup

1. Install the package

npm i @dubai-design-system/components-angular

2. Add the icon fonts

DDA components use Material Icons and Material Symbols. Add both inside the <head> tag of src/index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">

3. Register the custom elements

Register the DDA custom elements once, before bootstrapping, in src/main.ts — without this step the components never render:

import { bootstrapApplication } from '@angular/platform-browser';
import { defineCustomElements } from '@dubai-design-system/components-js/loader';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

defineCustomElements();

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

4. Use the components

Add ComponentLibraryModule to the imports of any standalone component that uses DDA components (or to your NgModule's imports array if your app still uses modules):

import { Component } from '@angular/core';
import { ComponentLibraryModule } from '@dubai-design-system/components-angular';

@Component({
  selector: 'app-root',
  imports: [ComponentLibraryModule],
  template: `
    <dda-button
      button_color="default-primary"
      start_icon="sentiment_satisfied"
      end_icon="arrow_forward"
      button_id="button"
      aria_label="button">
      Button
    </dda-button>
  `,
})
export class AppComponent {}

Upgrading

Upgrading from an earlier version? Install the same version of this package and @dubai-design-system/components-js, then read node_modules/@dubai-design-system/components-js/MIGRATION.md. It lists what to change when you come from 5.0.x, 4.1.0 or 3.x.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme