Getting Started - Angular


This getting started guide is intended for developers. See below for instructions on how to install Spark and bring it into your existing build.


Spark's Angular implementation assumes a few things about your project.

  • We assume that your project is processing Sass rather than plain CSS for style information. More information for converting an Angular project to SCSS is available at

  • We assume that your Angular project is using Angular 6 with Typescript or is an Angular-CLI based project. Currently, spark-core-angular is dependent on Angular 6 and has not been fully tested using Angular 7.

Spark Core

Getting Started

In order to get started with spark-core-angular , you'll need to follow these steps:

  • Install the spark-core npm package.

    npm install --save-dev @sparkdesignsystem/spark-core
  • Install the spark-core-angular npm package.

    npm install --save-dev @sparkdesignsystem/spark-core-angular
  • Install the needed peer dependencies for our npm package. When you use the Angular CLI it should automatically install our peer dependencies. If your application does not have one of our peer dependencies then your console should show a warning for that missing dependency when you install spark-core-angular .

  • Import the Sass setup file in your Angular application's global styles Sass file. This can be done in the scss file specified at the highest level of your app. This will bring all Spark-Core patterns into your build. The .scss file extension is needed in the case of Angular so as to not conflict with JS files.

    @import "node_modules/@sparkdesignsystem/spark-core/spark-core.scss";
  • Your HTML element needs to have the following class:
  • Add the following in your main app.module.ts file:

    import { SparkCoreAngularModule } from "@sparkdesignsystem/spark-core-angular";

    Add the SparkCoreAngularModule to the NgModule imports array.

  • Add the following in your main app.module.ts file:

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    Add the BrowserAnimationsModule to the NgModule imports array.

  • Spark does not provide icons directly. What you see on our icons page are proprietary icons in use by Quicken Loans. To supply your own icon set, you need to import an svg that contains symbols for the ids referenced on the icon page. This symbol file should occur in the DOM before the first use element.

Spark Extras

The Spark Angular Extras components rely on the Spark Core Angular npm package and the SparkCoreAngularModule importation documented above. Make sure that is done in order to use the extras components. If your baseURL if not set in your Typescript config file then you will need the additional './' prepended to the path for the module imports.

  • Install the npm package for the Spark Extra that you need.

    npm install --save-dev @sparkdesignsystem/spark-extras-angular-[package-name]
  • You'll need to import the NgModule provided.

    import { Spark[PatternName]Module } from '@sparkdesignsystem/spark-extras-angular-[pattern-name]';

Browser Support

Spark supports the following browsers (current version and 1 prior):

  • Google Chrome
  • Google Chrome (Mobile)
  • Mozilla Firefox
  • Mozilla Firefox (Mobile)
  • Microsoft Edge
  • Apple Safari
  • Apple Safari (Mobile)

Spark also supports the following:

  • Microsoft Internet Explorer 11

Change Workflow and Contribution Guide

If you are interested in contributing to Spark, please read our full change workflow and contribution guide to get started.