1 of 1

Angular

DDA with Angular

This is a step-by-step guide to use the DDA components in Angular.

Setup

First, install the package @dubai-design-system/components-angular

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

Next, add the material-icons package which is the icon package used by DDA:

Start by adding the material-icons package inside the <head> tag

<style>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</style>

Import and add the following to your app.module.ts file

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

@NgModule({
  imports: [ComponentLibraryModule],
})
export class AppModule {}

You should now be able to use DDA components inside your app.component.html file:

<dda-button
        button_color="default-primary"
        start_icon="sentiment_satisfied"
        end_icon="arrow_forward"
        custom_class=""
        component_mode=""
        button_id="button"
        aria_label="button"
        onclick="console.log('clicked')"
    >Button</dda-button>