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).
Adding Clarity to an Angular project
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/ui. Contains the static styles for building HTML components.
- @cds/core. Contains the Core components and icons
- @clr/angular. Contains the Angular components. This package depends on @clr/ui for styles.
Install them all by running the following command with
Step 2: Adding scripts and styles
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:
Step 3: Add Clarity to Angular application
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
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.
- Add Clarity components wherever they are needed in your application
- Explore the component usage, demo and api sections to learn about specific components
- Get help by asking a question on Clarity discussions (opens new window)
- Follow Clarity on Twitter (opens new window), stay up to date