Where does the nprogress configuration go in an Aurelia Decorator?

Question

Having worked through the Aurelia Contact-Manager tutorial I'd now like to change the HTML element that the nprogress progress bar is rendered against.

I've updated the src/app.html by adding an id to the div.container like so:

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <nav> ... </nav>

  <loading-indicator loading.bind="router.isNavigating || api.isRequseting"></loading-indicator>

  <div id="main" class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

.. and according to the nprogress documentation , I need to call the .configure() method like so..

NProgress.configure({ parent: '#main' });

But where does this line of code go? I assume somewhere in src/resources/elements/loading-indicator.js ..

Answer 1

Your assumption is correct, simply amend resources/elements/loading-indicator.js , adding a constructor() method to the class where you can call the .configure() method (line 8)..

import * as nprogress from 'nprogress';
import {bindable, noView, decorators} from 'aurelia-framework';

export let LoadingIndicator = decorators(
  noView(['nprogress/nprogress.css']),
  bindable({name: 'loading', defaultValue: false})
).on(class {
  constructor() {
    nprogress.configure({ parent: '#main' });
  }
  loadingChanged(newValue) {
    if (newValue) {
      nprogress.start();
    } else {
      nprogress.done();
    }
  }
});