Component-angular NPM

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

Setup

First, install the package:

npm i angular-workspace-dds

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>

Open `angular.json` and add the following line to the "styles" array under the `build` section:
```jsx
"styles": [
   
   "src/styles.css"
]

Import and add the following to your main.ts file

import {defineCustomElements} from '../node_modules/stencil-library-dds/loader';

defineCustomElements();

Then import the CUSTOM_ELEMENTS_SCHEMA and add it in the schema of the app.component.ts file

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  imports: [],
  styleUrls: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  title = 'angular';
}

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

<div>
    <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>
</div>

@angular/animations @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router rxjs stencil-library-dds tslib zone.js

0.1.0

11 months ago