1.0.0 • Published 3 years ago
ngx-context-store v1.0.0
NgxContextStore
An alternative yet advanced mechanism for Angular components to share data.
Demo on StackBlitz
Getting started
Install via NPM
npm install ngx-context-store
Import the NgxContextStoreModule
@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
<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
<!-- parent.component -->
<div [setContextO]="{ lastname: 'Appleseed', info: '...' }">
<child-component></child-component>
</div>
<!-- child.component -->
<div *setContext="myHelp under 'help'"> <!-- myHelp is a function -->
<grandchild-component></grandchild-component>
</div>
<!-- grandchild.component -->
<div *getContext="let lastname = lastname; let info = info; let help = help">
Lastname: {{lastname}}
Info: {{info}}
Help: {{help()}}
</div>
1.0.0
3 years ago
1.0.0-rc.4
3 years ago
1.0.0-rc.3
3 years ago
1.0.0-rc.2
3 years ago
1.0.0-rc.1
3 years ago
1.0.0-beta.2
3 years ago
1.0.0-beta.1
3 years ago