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.
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.
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
angular.json file. Find the
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:
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.
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
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).
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.