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.
What's newCopy link to this section
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 npmCopy link to this section
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
Copy code
UsageCopy link to this section
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 {}
Copy code
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,
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",
],
},
}
}
}
}
Copy code
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>
Copy code
StylesheetsCopy link to this section
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
Copy code
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
Copy code
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
Copy code
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
Copy code
Main
The main CSS contains all styles for text content (including headers and titles), grid, form, and classes.
@dds/angular/styles/dds-helpers.css
Copy code
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
Copy code
<div class="dds__reboot-wrapper">
<dds-button>Button</dds-button>
</div>
Copy code