Angular state management with RxCache: Part 2

user$ = this.userCache.clone$;
user$ = this.userCache.value$;
get user() {
return this.userCache.value;
}
<form *ngIf="user$ | async | clone as user" (submit)="save(user)">
import { RxCacheModule } from 'ngx-rxcache';
imports: [ BrowserModule, FormsModule, AppRoutingModule, RxCacheModule ],
import { clone } from 'ngx-rxcache'
user$ = this.userService.user$.pipe(map(user => clone(user)));
<app-spinner *ngIf="loading$ | async else loaded">loading</app-spinner>
<ng-template #loaded>
<ul *ngIf="user$ | async as user">
<li>{{user.firstName}} {{user.lastName}}</li>
<li>
<a [routerLink]="'/user/' + user.id + '/details'">Details</a>
</li>
<li>
<a [routerLink]="'/user/' + user.id + '/orders'">Orders</a>
</li>
<li><a routerLink="/users">Users</a></li>
</ul>
<router-outlet></router-outlet>
</ng-template>
import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { UserService } from '../../services/user.service';@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnDestroy {
loading$ = this.userService.loading$;
user$ = this.userService.user$; finalise = new Subject<void>(); constructor(
private userService: UserService,
route: ActivatedRoute
) {
route.params.pipe(
map(params => params.id),
takeUntil(this.finalise)
).subscribe(id => {
userService.load(parseInt(id));
});
}
ngOnDestroy() {
this.finalise.next();
this.finalise.complete();
this.userService.reset();
}
}
{
path: 'user/:id',
component: UserComponent,
children: [
{ path: 'details', component: UserDetailsComponent },
{ path: 'orders', component: OrdersComponent }
]
}
import { Component, OnInit } from '@angular/core';import { OrdersService } from '../../services/orders.service';
import { UserService } from '../../services/user.service';
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.css']
})
export class OrdersComponent {
orders$ = this.ordersService.orders$;
loading$ = this.ordersService.loading$; constructor(
private ordersService: OrdersService,
userService: UserService
) {
ordersService.load(userService.user.id);
}
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Broadening access to Museum collections with Flickr and a Google Chrome extension

Leveraging a DialogFlow(API.AI) Agent in an Angular 4 App

Angular 4 Components By HACKVEDA

Pass values between two Child Components — Angular

Every used JavaScript string, number, and array methods

Improving Performance at The Atlantic

Cycle.js Author André Staltz: The Day Programming Stops Being Fun, I’ll Look for Another Job

Automate Twitter actions using Node.js and deploy it on Heroku

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian Brand

Adrian Brand

More from Medium

OpenId Connect (OIDC) with Angular

Custom Structural Directives in Angular

Angular Framework

Unit Testing in Angular