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 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
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.