Skip to main content Skip to navigation Skip to search

We are constantly updating Clarity to work best with the latest version of Angular. Before you begin, make sure that you have all of the prerequisites setup for your computer. You can review the local environment setup on Angular's documentation (opens new window).

Clarity has an automated installation process that will work for most projects, but we've also included the manual steps if you need them.

For any Angular application, which uses the Angular CLI version 6 or greater, we recommend using the ng add feature to install Clarity automatically. This works regardless if you have a brand new application, or one that you've been working on for some time. We highly recommend that all Angular projects use the Angular CLI, because we'll also work on supporting migration features which will make it easier to keep Clarity and Angular up to date.

The following example shows how to 1) create a new Angular application, 2) change into the new directory, and 3) add Clarity automatically.

If you are using the Angular CLI with multiple projects, you can specify which project to add Clarity to by using the --project PROJECTNAME flag.

Manually adding Clarity to an Angular project

If you are unable to install Clarity using the Angular CLI as described above, then you can follow the steps below to get started. This might be applicable if you already have an Angular application that doesn't use the Angular CLI for building. This is uncommon, and generally only applicable to advanced use cases with custom tooling.

If you can already build an Angular app, then you need to install Clarity onto your project following these steps.

Step 1: Install packages

Clarity is published as several separate packages on NPM. You will need to install these into your project to have access to them at build time.

  • @clr/icons. The library that provides the custom element icons.
  • @clr/ui. Contains the static styles for building HTML components.
  • @cds/core. Contains the Core components.
  • @clr/angular. Contains the Angular components. This package depends on @clr/ui for styles.

Install them all by running the following command with npm or yarn.

Step 2: Adding scripts and styles

We need to make the build system aware of some CSS and JavaScript files so it can include them in the build. If you are using the Angular CLI, you need to add the files to the angular.json file. Find the scripts and styles arrays and add the following:

If you are not using the CLI, you'll need to add the files listed above to your build tooling or you could also put them in the head of the index.html file like:

Step 3: Add Clarity to Angular application

Import the ClarityModule into your Angular application's module. Some features also depend upon the BrowserAnimationsModule, so you should add it as well. A simple application's main module might look like this, but yours might be more complex.

Step 4: Working with Angular Feature Modules (Optional)

Some Angular projects are setup using Angular Feature Modules (opens new window), which is a way of splitting the application into smaller units. If you do this, you'll want to ensure you add ClarityModule and BrowserAnimationsModule to each feature module imports array, or you might also be able to add it once to a shared library module (opens new window).

Step 5: Add a Clarity component

If you'd like to see a Clarity component in action, you can add the following snippet to the very top of the AppComponent template to see if it loads an app level alert as expected.

That is all you need to get Clarity installed. To see it running, start your application build server using npm start or yarn start (commands may vary if you have a different build system) to see your Angular application. You might notice some small styling changes, but should not see any errors in the browser console.

What's next?

  1. Add Clarity components wherever they are needed in your application
  2. Explore the component usage, demo and api sections to learn about specific components
  3. Get help by asking a question on Clarity discussions (opens new window)
  4. Follow Clarity on Twitter (opens new window), stay up to date