0

I know that one can export configure function and also register components as global resource. But what pattern do you use when your component provides "default" configuration that can be overridden? This needs to happen during configuration phase and needs to apply to all instances of the component. Do you use class with static members (typescript) or something else? Or, can I create instance of the config, set properties and add it to DI container somehow, so that all dependent components now get that instance?

import {PagingConfig} from "./PagingConfig";

export class PaginationConfig extends PagingConfig {

    boundaryLinks = false;
    boundaryLinkNumbers = false;
    directionLinks = true;
    rotate = true;
    forceEllipses = false;
    maxSize: number = null;
}

and here is my main.ts that configures. How do I override default configuration from above?

    import * as Promise from "bluebird";
    import {Aurelia} from "aurelia-framework";
    import {PaginationConfig} from "./components/shared/PaginationConfig";

    export function configure(aurelia: Aurelia):void {
      aurelia.use
            .standardConfiguration()
            .developmentLogging()
            .globalResources(["components/bar/InsightBarCustomElement",
                              "components/pagination/PaginationCustomAttribute"]);
epitka
  • 17,275
  • 20
  • 88
  • 141

1 Answers1

0

Solved this by reading a little bit this document https://github.com/aurelia/dependency-injection/blob/master/doc/article/en-US/dependency-injection-basics.md

Basically aurelia being injected into configuration has instance of container attached to it, so all I had to do is instantiate my config type, make changes and add it to the container. Something like this

import * as Promise from "bluebird";
import { PaginationConfig } from "./components/shared/PaginationConfig";
import { Aurelia } from "aurelia-framework";
import { Container } from "aurelia-dependency-injection";


export function configure(aurelia: Aurelia): void {
  function configurePaginationCustomAttribute(): void {

    let paginationConfig = new PaginationConfig();

    paginationConfig.firstText = "«";
    paginationConfig.previousText = "‹";
    paginationConfig.nextText = "›";
    paginationConfig.lastText = "»";

    aurelia.container.registerInstance(PaginationConfig,paginationConfig);
  }

  configurePaginationCustomAttribute();

  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(["components/bar/InsightBarCustomElement",
      "components/pagination/PaginationCustomAttribute"]);

  let area: string = aurelia.host.getAttribute("data-area");

  console.log("Setting  aurelia root", area);

  aurelia.start().then(a => a.setRoot(area + "/app/app"));

}
epitka
  • 17,275
  • 20
  • 88
  • 141
  • That's a great way to do it. The IoC container is a perfect fit to solve those kind of problems. You could also go for a generalized solution like https://github.com/Vheissu/Aurelia-Configuration – zewa666 May 07 '17 at 09:03