component-angular

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

latest

npm

Version: 0.1.0

Version published: last year

Weekly downloads: 1

Maintainers: 1

Weekly downloads

Created: last year

Source

DDA with Angular

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>

FAQs

What is component-angular?

Is component-angular popular?

Is component-angular well maintained?

Package last updated on 13 Dec 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install