Package Exports

ngx-value

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-value) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngx-value

npm

ngx-value is an Angular library that provides a way to load JSON data from several external sources and read their properties just by using the @Value decorator.

Installation

To use ngx-value in your project just run:

npm install ngx-value

API:

Decorators

@Value(name: string, data?: string): any

Methods

Values(...data: string[]): () => () => Promise<any>

Get(property: string, data?: string): any

Usage

First off, it is necessary to load any external data before our angular application starts and as such we need to include some initialization logic into our app. As seen below, we make use of the APP_INITIALIZER provided by Angular which will allow us to run some code before the app actually starts running.

Afterwards just use @Value("...") or Get("...") to retrieve any property.

/**
 *  `app.module.ts`
 */

import { Values } from 'ngx-value';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: Values('assets/properties.json', 'assets/websites.json', 'assets/authors.json'),
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

/**
 *  `app.component.ts`
 */

import { Value, Get } from 'ngx-value';

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

  @Value('title') // Default location is "assets/properties.json"
  title: string = '- Not Found -'; // Default value

  @Value('subtitle')
  subtitle: string = '- Not Found -';

  @Value('google', 'assets/websites.json') // load from "assets/websites.json"
  google: string = '- Not Found -';

  @Value('stackoverflow', 'assets/websites.json')
  stackoverflow: string = '- Not Found -';

  @Value('angular', 'assets/websites.json')
  angular: string = '- Not Found -';

  @Value(null, 'assets/authors.json') // "null" property means it's an array
  authors: any = [];

  random: string = '- Not Found -';

  ngOnInit(): void {
    this.random = Get('random');
  }
}