@nanostores/angular
v0.0.4
Published
Angular integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores
Downloads
88
Readme
Nano Stores Angular
Angular integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores.
How to install
pnpm add @nanostores/angular # or npm or yarn
How to use
// your NgModule:
import { NANOSTORES, NanostoresService } from '@nanostores/angular';
@NgModule({ providers: [{ provide: NANOSTORES, useClass: NanostoresService }], ... })
app.component.ts:
// example using async pipes:
import { Component } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { Observable, switchMap } from 'rxjs';
import { profile } from '../stores/profile';
import { IUser, User } from '../stores/user';
@Component({
selector: "app-root",
template: '<p *ngIf="(currentUser$ | async) as user">{{ user.name }}</p>'
})
export class AppComponent {
currentUser$: Observable<IUser> = this.nanostores.useStore(profile)
.pipe(switchMap(({ userId }) => this.nanostores.useStore(User(userId))));
constructor(private nanostores: NanostoresService) { }
}
// example without async pipes:
import { Component, OnInit } from '@angular/core';
import { NanostoresService } from '@nanostores/angular';
import { switchMap } from 'rxjs';
import { profile } from '../stores/profile';
import { User } from '../stores/user';
@Component({
selector: "app-root",
template: '<p>{{ text }}</p>'
})
export class AppComponent implements OnInit {
text = '';
constructor(private nanostores: NanostoresService) { }
ngOnInit() {
this.nanostores.useStore(profile).pipe(
switchMap(({ userId }) => this.nanostores.useStore(User(userId)))
)
.subscribe(user => this.text = `User name is ${user.name}`);
}
}