ngx-context-store/README.md

An alternative yet advanced mechanism for Angular components to share data.

# NgxContextStore

An alternative yet advanced mechanism for Angular components to share data.

Demo on [StackBlitz](https://stackblitz.com/edit/ngx-context-store-demo)

## Getting started

### Install via NPM

```ts
npm install ngx-context-store
```
### Import the `NgxContextStoreModule`
```ts
@NgModule({
  /* ... */
  imports: [
    /* ... */
    NgxContextStoreModule,
  ],
})
export class AppModule { }
```
## Usage

You can use the `setContext` (optionally with `setContextUnder`) or `setContextO` directive to put some data into the context.

Then you can get this data everywhere inside with the `getContext` directive.

### Easy syntax

```html
<div [setContext]="'some value'"><!-- $implicit context -->
  <div *setContext="'other value' under 'other'"> <!-- 'other' is the name of the context key -->
    <div *getContext="let implicit; let other = other">
      <strong>
        {{implicit}} === 'some value'
        {{other}} === 'other value'
      </strong>
    </div>
  </div>
</div>
```

### Over multiple components

```html
<!-- parent.component -->

<div [setContextO]="{ lastname: 'Appleseed', info: '...' }">
    <child-component></child-component>
</div>
```

```html
<!-- child.component -->

<div *setContext="myHelp under 'help'"> <!-- myHelp is a function -->
    <grandchild-component></grandchild-component>
</div>
```

```html
<!-- grandchild.component -->

<div *getContext="let lastname = lastname; let info = info; let help = help">
    Lastname: {{lastname}}
    Info: {{info}}
    Help: {{help()}}
</div>
```