Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@clr/angular

vmware-clarity91.6kMIT17.10.0TypeScript support: included

Angular components for Clarity

ng-add, clarity, angular, components

readme

Installing Clarity Angular npm version

  1. Install Clarity packages through npm:

    npm install @clr/ui @clr/angular @cds/core

  2. Import the ClarityModule into your Angular application's module. Your application's main module might look like this:

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from '@clr/angular';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        ClarityModule,
        ....
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
})
export class AppModule {    }

  3. Include the necessary styles in the build. You can do this by either including the compiled/minified css in your angular.json file or by importing the scss/css directly in your top level styles.scss/css file.

  //...
  "styles": [
    "node_modules/@cds/core/global.min.css",
    "node_modules/@cds/core/styles/theme.dark.min.css",
    "node_modules/@clr/ui/clr-ui.min.css",
    //... any other styles
  ]
  //...
@use '@cds/core/global.min.css';
@use '@cds/core/styles/theme.dark.min.css';
@use '@clr/ui/clr-ui.min.css';

Note: The above instructions represent the best practice for Clarity Design System. For information about accommodating legacy themes, see the Legacy Styles section in the @clr/ui package.

  1. Set the Theme Add the cds-theme=”light” attribute to the body element in your main HTML file:
<body cds-theme="light" />

You can toggle to dark theme by setting cds-theme="dark".

changelog