Rewards Design System components in Angular

The Rewards Design System is build using Stencil. It is not a JS framework. It is a compiler that produces a reusable web component that can be embedded anywhere else.

This is a step by step guide to consume a non-trivial stencil component in an Angular app.

The starter Angular app was created with Angular CLI.

Table of contents

• Add the component(s) to the dependencies
• Import the component
• Consume the component
• Add Rewards assets to your app
• Use Rewards DS tags in your app!

1: Add the component(s) to the dependencies

Add the component to the app dependencies in package.json

// package.json

"dependencies": {
  ...
      "rewards-ds": "^0.0.6",

}

2: Import the component(s)

Import the component in the main.js of the app:

import { defineCustomElements as defineRewardsDs} from 'rewards-ds/dist/loader';

defineRewardsDs(window);

3: Consume the component

To prevent Angular from complaining that there is an unrecognized component tag, add CUSTOM_ELEMENTS_SCHEMA to the schemas array in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }

4: Add Rewards DS Assets to your app

Rewards Design System components consume both images and fonts from within the package — we'll be switching these to a CDN in the near future, but in the meantime, simply add the following to your angular.json or angular-cli.json file:

If you're using Angular 6 or <, use this:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/rewards-ds/dist/collection/assets/",
    "output": "./assets/"
  }              
],

If you're using Angular versions 2 - 5, use this:

"assets": [
  "assets",
  { "glob": "**/*", "input": "../node_modules/rewards-ds/dist/collection/assets/", "output": "./assets/" }
]

5: Use Rewards DS tags inside your app

It is now possible to use the tag provided by the Rewards DS component in any template of the app. Each component will also have prop values that you will be able to leverage (documentation will be provided soon!) You can also add content in between the component opening and closing tags (< > and </>), which will be adding into the relevant < slot /> inside a component.

<rds-balance></rds-balance> 

<rds-balance 
    class="column is-full" 
    points="1368" 
    pointstoearn="632" 
    savevalue="10" 
    offnextshopvalue="80" 
    fuelvouchers="3"
    app>
</rds-balance>