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

For Versions 3.11.0+, add CSS reference as below:

"styles": [
  "node_modules/@dubai-design-system/components-js/dist/dda/dda.css"
]

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:

PreviousVueNextRTL Support

Last updated