‚̧Next Phenomenal Microbrewery
    Have ideas to improve npm?Join in the discussion! ¬Ľ

    ng2-config-initializer-decorator
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    Jump to

    Overview

    [jump to TOC]

    A decorator for angular2 components which allows to pass arbitrary data to a custom defined service.
    The service will then behave as a proxy to invoke other specialized services, passing data received from the decorator.

    Examples of real world use cases:

    • set a specific layout arrangement when navigating to a route by toggling on and off different router outlets
    • set the active main menu item when the same item is shared by multiple routes

    Installation

    [jump to TOC]

    1. Install the package:
    $ npm install ng2-config-initializer-decorator --save

    Usage

    [jump to TOC]

    In a router component (feature component) use the decorator like the following:
    (comments added to highlight the important lines)

    app.component.ts

    import { ConfigInitializer } from 'ng2-config-initializer-decorator';
     
    // <any> just to keep focus on the important bits 
    // but a type can be defined and used here
    @ConfigInitializer<any>({
      layout: 'someLayoutEnumValue',
      mainMenuItem: 'someMainMenuEnumValue',
      someOtherData: 'someOtherValue',
    })
    // this is the normal Component decorator
    // @Component({
    //   selector: 'app-root',
    //   templateUrl: './app.component.html',
    //   styleUrls: ['./app.component.css'],
    //   ...
    // })
    // export class AppComponent implements OnInit {
        ...

    This decorator will invoke and pass the data to a provider defined for the CONFIG_INITIALIZER token.
    The CONFIG_INITIALIZER is exported by the ng2-config-initializer-decorator module.

    Example for the CONFIG_INITIALIZER provider:

    app.module.ts

    import { CONFIG_INITIALIZER } from 'ng2-config-initializer-decorator';
     
    const configInitializer: FactoryProvider = {
      provide: CONFIG_INITIALIZER,
      deps: [
      //  LayoutManagerService, 
      //  MainMenuService
      ],
      useFactory: 
      //  (
      //    layoutManagerService: LayoutManagerService,
      //    mainMenuService: MainMenuService,
      //  ) => {
      //    return (configInitializerData: any) => {
      //      // configInitializerData is the object passed to the decorator
      //      layoutManagerService.setLayout(configInitializerData.layout);
      //      mainMenuService.setActive(configInitializerData.mainMenuItem);
      //    };
      //  },
    };
     
    // @NgModule({
    //   declarations: [
    //     AppComponent
    //   ],
    //   imports: [
    //     ...
    //   ],
      providers: [
        configInitializer,
        ...
      ],

    This factory service will receive the data passed to the decorator and based on that data it can invoke and pass the data to other specialised services such as a LayoutManagerService, a MainMenuService etc.

     ...
    // useFactory: 
    //    (
    //      layoutManagerService: LayoutManagerService,
    //      mainMenuService: MainMenuService,
    //    ) => {
    //      return (configInitializerData: any) => {
              // configInitializerData is the object passed to the decorator
              layoutManagerService.setLayout(configInitializerData.layout);
              mainMenuService.setActive(configInitializerData.mainMenuItem);
    //      };
    //    },

    For a full working example check the ./example folder.
    The example also demonstrates how to statically type the decorator.

    Links

    [jump to TOC]

    NPM:
    https://www.npmjs.com/package/ng2-config-initializer-decorator
    GITHUB:
    https://github.com/efidiles/ng2-config-initializer-decorator.git

    Author

    [jump to TOC]

    Eduard Fidiles

    License

    [jump to TOC]
    Released under the MIT license.

    Copyright © 2016, Eduard Fidiles

    Install

    npm i ng2-config-initializer-decorator

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar