# ngx-settings

> Externalization for Angular apps. ngx-settings uses JSON configuration to manage runtime dependencies post deployment.

Latest version **0.1.2** (published 2019-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-settings
pnpm add ngx-settings
yarn add ngx-settings
bun add ngx-settings
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-05-19 |
| First published | 2019-05-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 87.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arjun Chokkamaman |
| Maintainers | emceearjun |
| Keywords | settings, config, configuration, externalization, angular |

## Links

- npm: https://www.npmjs.com/package/ngx-settings
- Repository: https://github.com/emceearjun/ngx-settings
- Homepage: https://github.com/emceearjun/ngx-settings#readme
- Issues: https://github.com/emceearjun/ngx-settings/issues
- npm.io page: https://npm.io/package/ngx-settings

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2019-05-19
- 0.1.1 — 2019-05-19
- 0.1.0 — 2019-05-18
- 0.0.4 — 2019-05-18
- 0.0.3 — 2019-05-18
- 0.0.2 — 2019-05-18
- 0.0.1 — 2019-05-18

## README

## ngx-settings
Externalization for Angular apps.
ngx-settings uses JSON configuration to manage runtime dependencies post deployment.

## Installation
```posh
npm install @ngx-settings --save
```

## Import

#### Module
First step is to import `NgxSettingsModule` into your NgModule
```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxSettingsModule } from 'ngx-settings';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxSettingsModule.forRoot({
      settingsUrl: "https://jsonplaceholder.typicode.com/todos/1"
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### Sample output from URL:
```json
{
  "apiKey": "abcd1234",
  "credentials": {
    "username": "johndoe",
    "password": "pass"
  }
}
```

#### Usage
- Inject `NgxSettingsService` into the component class and use the `get` method by passing in the key:
```ts
export class AppComponent {
    apiKey: string;
    username: string;

    constructor(private settingsService: NgxSettingsService) {
        this.apiKey = this.settingsService.get("apiKey"); // Output: "abcd1234"
        this.username = this.settingsService.get("credentials.username"); // Output: "johndoe"
    }
}
```
- Use `NgxSettingsPipe` by name `settingsKey` in the HTML template:
```html
<div>{{"apiKey" | settingsKey}}</div><!-- Output: abcd1234 -->
<div>{{"credentials.username" | settingsKey}}</div><!-- Output: johndoe -->
```
- Provide a default value in case the actual property is not available for any reason:
```ts
export class AppComponent {
    apiKey: string;

    constructor(private settingsService: NgxSettingsService) {
        this.apiKey = this.settingsService.get("apiKey", "myDefaultKey"); // Output: "myDefaultKey"
    }
}
```
```html
<div>{{"apiKey" | settingsKey:"myDefaultKey"}}</div><!-- Output: myDefaultKey -->
```

---
_Source: https://npm.io/package/ngx-settings · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._