Getting Started - Angular

Welcome

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

Requirements

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

  • We assume that your Angular project is using Angular 8 with Typescript or is an Angular-CLI based project. Currently, spark-angular is dependent on Angular 8.

Spark

Getting Started

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

  • Install the spark npm package.

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

    npm install --save-dev @sparkdesignsystem/spark-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-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 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/spark.scss";
  • Your HTML element needs to have the following class:
    sprk-u-JavaScript
  • Add the following in your main app.module.ts file:

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

    Add the SparkAngularModule 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.

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.