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);
}
}

--

--

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