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 npm or yarn.

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

yarn add @clr/angular @clr/ui @cds/core

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:

"styles": [
  "node_modules/@clr/ui/clr-ui.min.css",
  "... any other styles"
],

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:

<link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css" />

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.

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

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

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.

<clr-alert [clrAlertAppLevel]="true">
  <clr-alert-item>
    <span class="alert-text">
      Congratulations, you have installed Clarity!
    </span>
  </clr-alert-item>
</clr-alert>

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