agr-configuration v0.0.1

AgrConfiguration

Service to load configuration from JSON.

Installation

Using npm:

npm install agr-configuration

Usage

JSON data:

{
    "value1": "value1",
    "value2": "value2",
    "showElement": true,
    "value3":{
        "subvalue1": "nested value"
    },
    "values": [
        {
            "label": "label1",
            "value": "value1"
        },
        {
            "label": "label2",
            "value": "value2"
        },
        {
            "label": "label3",
            "value": "value3"
        }
    ]
}

In app.module:

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

// Modulos
import { AppRoutingModule } from './app-routing.module';
import { AgrConfigurationModule, AgrConfigurationService } from 'agr-configuration';

// Componentes
import { AppComponent } from './app.component';
import { ExampleAgrConfigurationComponent } from './example/example-agr-configuration/example-agr-configuration.component';

export function configFactory(provider: AgrConfigurationService) {
  return () => provider.getDataFromJSON('assets/data/data.json');
}

@NgModule({
  declarations: [
    AppComponent,
    ShowcaseAgrConfigurationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgrConfigurationModule
  ],
  providers: [
    AgrConfigurationService,
    {
      provide: APP_INITIALIZER,
      useFactory: configFactory,
      deps: [AgrConfigurationService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your ts:

import { AgrConfigurationService } from 'agr-configuration';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example-agr-configuration',
  templateUrl: './example-agr-configuration.component.html',
  styleUrls: ['./example-agr-configuration.component.css']
})
export class ExampleAgrConfigurationComponent implements OnInit {

  constructor(private config: AgrConfigurationService) {
    console.log(this.config.getAllData());
    console.log(this.config.getData('variable2'))
  }

  ngOnInit() {
  }

}

In your html:

<h3>Get simple value</h3>
<p>
  {{'value1' | getDataConf}}
</p>


<h3>Get nested value</h3>
<p>
  {{'value3.subvalue1' | getDataConf}}
</p>

<h3>Show value depends state</h3>
<p *ngIf="'showElement' | getDataConf">
  Show me!
</p>

<h3>Show values of array</h3>
<p *ngFor="let item of ('values' | getDataConf)">
  {{item.label + " - " + item.value}}
</p>