Getting Started with Angular Components

We have released the first set of native Angular components within DDS v2. They are built with Angular 11 and Typescript, and are compatible with Angular versions 10, 11, 12, 13, 14, and 15.

Contents

What's new

If your application already uses wrapped Vanilla components, it’s possible to replace them as the native Angular components are released. However, it’s not possible to use the same component both as wrapped and native due to naming conflicts. Note that:

  • No JavaScript initialization is required.
  • Code editors with IntelliSense can interpret custom elements and provide a friendly autocomplete experience.
  • There is static type checking for components. Angular and Typescript will warn of errors, even before starting the application.

All published components meet WCAG 2.1 requirements and have been reviewed by the Accessibility, Globalization, and Design teams.

Installation via npm

All Angular components are available through npm, which is a package manager for JavaScript. Use the following command in your terminal to install the Dell Design System Angular library:

npm config set strict-ssl false
npm install @dds/angular --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod

Usage

The <@dds/angular> package contains everything you need to use DDS Angular components in your project.

Component modules

In your application bootstrap, normally the <app.module.ts> file, import the module .

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { DDSAngularModule } from "@dds/angular";

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, AppRoutingModule, DDSAngularModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

Global styles

Although DDS Angular components wrap their style, it’s required to add DDS stylesheets in the application for components to correctly appear.

To get the best experience using DDS Angular components, it’s highly recommended to add the following list of styles: <dds-reboot.css>, <dds-fonts.css>, and <dds-icons.css>. Although it’s not required, is highly recommended as applications usually allow for icons.

The following example is based on the <angular.json> file created by the command ng new angular-12. The code example contains only the hierarchy to get through the styles property, and shows how to add DDS stylesheets in the application. Keep standard properties in the <angular.json> file.

In the <angular.json> file:

"projects": {
    "angular12": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss"
              // dds stylesheets
              "node_modules/@dds/angular/styles/dds-reboot.css",
              "node_modules/@dds/angular/styles/dds-fonts.css",
              "node_modules/@dds/angular/styles/dds-icons.css",
            ],
          },
        }
      }
    }
}

Adding components

Once you have imported all the modules and required stylesheets, you can add DDS Angular components to templates:

<body>
    <dds-button>Button</dds-button>
</body>

Stylesheets

All stylesheets are located on <dds/angular/styles>.

The recommended way to load the stylesheet file in the application is by adding the file(s) in the styles list defined in the <angular.json> file.

Review global styles for implementation details.

Reboot reset (HTML elements)

Resets the browser defaults to the Dell Design System styles.

@dds/angular/styles/dds-reboot.css

Fonts

Loads the Dell Design System font family. The file contains links for woff, woff2, eot, and ttf. All fonts are retrieved from our CDN.

@dds/angular/styles/dds-fonts.css

Icons

Loads the Dell Design System icons as a font family. The file contains links for woff, woff2, eot, and ttf. All fonts are retrieved from our CDN.

@dds/angular/styles/dds-icons.css

Helpers

DDS provides dozens of utility classes for showing, hiding, aligning, and spacing content. These helpers have been moved out of the main file in v2 and are optional.

@dds/angular/styles/dds-helpers.css

Main

The main CSS contains all styles for text content (including headers and titles), grid, form, and classes.

@dds/angular/styles/dds-helpers.css

Encapsulating styles

This stylesheet can be used to apply reboot as a wrapper when the class is placed in a container. This allows the reskinning of elements within a container without affecting other elements within the page.

@dds/angular/styles/dds-reboot.css

<div class="dds__reboot-wrapper">
    <dds-button>Button</dds-button>
</div>

Storybook demo

Storybook

Angular

Review the latest code releases for Angular.
Visit Storybook