Skip to main content

Getting Started with code | Angular

Install​

npm install @dhl-official/angular-library

Enable Custom Elements​

To install the DHL User Interface Library into your Angular application, first enable custom element schemas within app.module.ts.

Import CUSTOM_ELEMENTS_SCHEMA from @angular/core and add it to the schemas array as shown below:

caution

Note the import of ComponentLibrary from @dhl-official/angular-library replaces the import of ComponentModule

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ComponentLibrary } from '@dhl-official/angular-library';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component'; 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
    ComponentLibrary
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Install Styles​

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

"styles": [
    "@dhl-official/tokens/index.css"
  ]
You should now be able to use DUIL components as following within your Angular application:
<dhl-button>Button</dhl-button>

Install Icons​

{
  "glob": "**/*",
  "input": "./node_modules/@dhl-official/icons",
  "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/ICON_NAME.svg">Button with icon</dhl-button>
The full list of icons is available here