Starter Kit

Version: 10.0.0

Jumpstart a new Angular project

Use the starter kit in the creation of new Angular applications. Integrating the starter kit into an existing application is not recommended. The schematic will replace all content in the app.component.html file.

The Unifi Angular Starter Kit is designed to support the rapid development of task-based Nelnet applications, by giving developers the basic standard layout to start from.

Starter kit preview

Components

The starter kit includes some basic Unifi Angular components and is fully responsive.

App Bar

The app bar at the top of the application contains the white "circle n" Nelnet logo, and placeholders for a username and avatar, and logout button.

Button

The placeholder logout button in the app bar is a u-button component.

Drawer

The sidebar is a responsive u-drawer element, anchored to the left. It contains a stubbed-out side navigation.

Icon

The hamburger icon in the mobile navigation is a u-icon component.

Quick Start Guide

To use the Unifi Angular Starter Kit, you need the Angular CLI installed. Follow the instructions to spin up a new Angular application.

The latest version of Unifi Angular is compatible with Angular 16.0.0+, and Typescript 4.9.4+. Applications using Angular 15 will need to stay on Unifi Angular 8. Any applications using an Angular version less than 15 should update before using Unifi Angular.

Install Unifi Angular using ng add @nelnet/unifi-components-angular@latest from the project root. Follow the prompts to add the Task theme, Unifi default font, and the starter kit. More details on theming and the default font can be found on our Get Started page.

Starter Kit Template

When the starter kit is added, the default content in app.component.html will be completely replaced with the starter kit layout and components. From there, your Nelnet Task app can be customized.

Styles

The schematics will create a new file called starter-kit-styles.scss in your project and add it to the angular.json build styles.

Modules and Packages

The schematic will also add the necessary component modules to app.module.ts, add the necessary packages in the package.json, and install the dependencies.

After the dependency installation, start your local server using ng serve and explore the starter kit!

Technical Issues

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