Skip to main content

Getting Started with code | Angular

Install​

npm install @dhl-official/angular-library

To use the DHL User Interface Library in your Angular application, simply import the defineCustomElements in your main.ts.

import { defineCustomElements } from '@dhl-official/stencil-library/loader';
defineCustomElements(window);

Then, simply import the ComponentLibrary in your app.ts. This automatically registers all DHL web components so Angular recognizes them.

import { Component, signal } from '@angular/core';
import { ComponentLibrary } from '@dhl-official/angular-library';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ComponentLibrary],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

Enable CUSTOM_ELEMENTS_SCHEMA (Optional)​

If your project requires suppressing Angular’s validation for unknown custom elements (for example, during migration or prototyping), you can enable CUSTOM_ELEMENTS_SCHEMA as follows:

caution

Use CUSTOM_ELEMENTS_SCHEMA only if necessary. Importing ComponentLibrary already registers all DUIL components, ensuring Angular recognizes them without schema overrides.

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App { }

Install Styles​

To install the component styles, navigate to angular.json and add the following to the styles array:

"styles": [
  "node_modules/@dhl-official/tokens/dist/css/index.css"
]

You should now be able to use DUIL components as following within your Angular application:

<dhl-button>Button</dhl-button>

Install Icons​

To install the icons, navigate to angular.json and add the following to the assets array:

{
  "glob": "**/*",
  "input": "node_modules/@dhl-official/icons/dist",
  "output": "assets/duil/icons"
}

You should now be able to use DUIL components as following within your Angular application:

<dhl-button icon="assets/duil/icons/android.svg">Button with icon</dhl-button>

The full list of icons is available here