Angular

Unifi Angular Starter Kit

Brand new Angular applications can use the Unifi Angular Starter Kit.

Using Unifi Angular Schematics

Unifi Angular can be added using the Angular CLI and our ng add schematic.

If you do not have the Angular CLI installed, please visit the Angular CLI website and follow their instructions on how to get started.

Instructions

Starting from the root of your application, in the command line, run the ng add schematic:

ng add @nelnet/unifi-components-angular@latest

Or if using Unifi Angular 5.1.0:

ng add @nelnet/unifi-components-angular@5.1.0

Theme Generation

You will be prompted to choose a theme. Task theme is the default theme, used primarily for task-based applications. A _theme-variables.scss and _theme-tokens.scss file will be generated with the chosen theme. Selecting none is only recommended if your application already includes the theming files previously listed.

By default, if either of the theming files already exist in the src folder of the application, theme generation will be skipped automatically to prevent overwriting of an existing theme.

Default Unifi Font

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap" rel="stylesheet" />

After choosing a theme, you will be asked if you would like to add the default Unifi Google Font, 'Open Sans'. If you choose 'yes', the font link will be added to your index.html file.

Package Information

The ng add schematic will add the necessary dependencies to your package.json file, and install them. This includes the latest versions of Unifi Web and Angular CDK.

Manual Installation

If you prefer to install Unifi Angular without using our ng add schematic, it can be installed using npm. From the root of your Angular project, run:

npm install @nelnet/unifi-components-angular@latest

You will need to also install Angular CDK:

npm install @angular/cdk@latest

And the latest version of the Unifi Web Library:

npm install @nelnet/unifi-components-web@latest

You will also need to add the Unifi font to your index.html file (see above).

Going this route will require you to create two theming files, _theme-variables.scss and _theme-tokens.scss. The Unifi Design System has two themes: Unifi and Task, depending on which theme you want to use the contents of your theming files will change.

If using the Task theme your theming files should look like this:

// _theme-tokens.scss
@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/task-theme-tokens";

// _theme-variables.scss
@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/task-theme-variables";

If using the Unifi theme your theming files should look like this:

// _theme-tokens.scss
@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/unifi-theme-tokens";

// _theme-variables.scss
@forward "@nelnet/unifi-components-angular/src/lib/scss/theming/unifi-theme-variables";

After your theming files are created the last step is to update your main stylesheet (most likely called styles.scss) to use your theming files (paths may be different depending on where your styles are located) and include the unifi-core mixin.

@use "../theme-tokens";
@use "../theme-variables";
@use "@nelnet/unifi-components-angular/src/lib/scss/theming/unifi-core";
@include unifi-core.u-core();

NOTE: only include the u-core() mixin once in your app, your theming files can be included here and in any other stylesheet where you need access to the Sass variables.

Be sure your main stylesheet is included in yourangular.json file and that angular.json is also utilizing stylePreprocessorOptions with your node_modules folder added to the includePaths.

Customize Unifi

To learn more about custom theming and styling for Unifi Angular, review the Unifi Angular Theming documentation.

Technical Issues

If you run into issues, please reach out to us on Teams.