iam trying to use async pipes instead of manually subscribing in components, in case, iam just displaying data which i get from server, everything works fine. But what if i need to change displayed part of displayed data later, based on some event?
For example, i have a component which displays timetable, which can be later accepted by user. I create timesheet$ observable and i use it in my template with async pipe. For accepting i created subject, so i can emit, when user accepts the timesheet. But how do i combine these two streams(approvementChange$ and timesheet$), so the $timesheet gets updated? I was trying combineLatest, but it returns the latest values, so i cant decide, if the value from approvementChange stream is new or old. Any ideas how to solve this?
export class TimesheetComponent {
errorMessage: string = '';
timesheet$: Observable<Timesheet>;
private approvementSubject = new Subject<TimesheetApprovement>();
approvementChange$ = this.approvementSubject.asObservable();
constructor(
private planService: PlanService,
private statusService: StatusService,
private notifService: NotificationService
) {}
this.timesheet$ = this.statusService.appStatus.pipe(
switchMap((status) => {
return this.planService.getTimesheet(
status.selectedMonth,
status.selectedAgency.agNum
);
})
); //get data every time user changed selected month
approveTimesheet(isApproved: boolean = true) {
const approvement: TimesheetApprovement = {
isApproved: isApproved,
approveTs: new Date(),
isLock: true,
};
this.approvementSubject.next(approvement);
}
}
But what if i need to change displayed part of displayed data later, based on some event?
RxJS provides lots of operators for combining, filtering, and transforming observables.
You can use scan to maintain a "state" by providing a function that receives the previous state and the newest emission.
Let's look at a simplified example using a generic Item interface:
interface Item {
id : number;
name : string;
isComplete : boolean;
}
We will use 3 different observables:
initialItemState$ - represents initial state of item after being fetched
itemChanges$ - represents modifications to our item
item$ - emits state of our item each time a change is applied to it
private itemChanges$ = new Subject<Partial<Item>>();
private initialItemState$ = this.itemId$.pipe(
switchMap(id => this.getItem(id))
);
public item$ = this.initialItemState$.pipe(
switchMap(initialItemState => this.itemChanges$.pipe(
startWith(initialItemState),
scan((item, changes) => ({...item, ...changes}), {} as Item),
))
);
You can see we define item$ by piping the initialItemState$ to the itemChanges$ observable. We use startWith to emit the the initialItemState into the changes stream.
All the magic happens inside the scan, but the set up is really simple. We simply provide a function that accepts the previous state and the new change and returns the updated state of the item. (In this case, I'm just naively apply the changes to the previous state; it's possible this logic would need to be more sophisticated for your case.)
This solution is completely reactive. The end result is a clean item$ observable that will emit the updated state of the current item (based on id), whenever the id changes or the changes occur on the item.
Here's a StackBlitz where you can see this behavior.
you need to track only approvementChange
after that you can pick the latest timesheet via withLatestFrom
approvementChange$
.pipe(withLatestFrom(this.timesheet$))
.subscribe(([accepted, latestTimesheet]) => accepted ? save(latestTimesheet) : void 0)
Related
I have a page form with values already setted, previous and next button elements.
At ngOnInit, I'm getting a List with 3 items from an observable, as initial value - sometimes I get 4 items.
Before I go to the next page I have to click, necessarily, on a button that will call the function calculate() that will make a request and my observable List will have 4 items.
So, when I click on next button onNextButton() I would like to use the initial value to compare with the current, if they are the same, or check if this list had any changes (any incrementing).
The way that I'm doing, I'm not manage to keep/store the first value. On next button click, i'm getting the updated value, instead the previous.
My code:
export class PageComponent implements OnInit {
questions$: Observable<any[]>;
hasChange: boolean;
ngOnInit() {
// GETTING INITIAL VALUE
this.questions$.subscribe((quest: any[]) => {
this.hasChange = quest.length > 3 ? true : false
});
}
calculate() {
// calling a request
// at this point, my observable will update and will have 4 items.
}
onNextButton() {
if (hasChange) {
// submit()
} else {
// navigate()
}
}
}
So, in this scenario the initial value should be a list w/ 3 items, but i'm getting 4 and its breaking my logic...
How do I get the previous value of Observable and store it in a variable?
Or, how can I detect any changes?
I tried behavioursubject and pairwise from RxJS, but I'm not sure how to apply it.
Thank you!!!
As you stated, you must use ReplaySubject or BehaviourSubject, since Observable does not have that "memory" for retrieve last emitted value.
ReplaySubject and BehaviourSubject are similar, both send last emitted value on subscription, but ReplaySubject only emits last emitted value on subscription and BehaviourSubject stores a list of last emitted values (configurable size). I'll be using BehavoiurSubject since is a bit more complete.
Just replace the Observable you were using with the BehaviourSubject, and keep in mind that you must definde that memory size when you instance the class. For example, you could create a method that returns a BehaviourSubject with last boolean stored like this:
private fooBehaviourSubject;
function ngOnInit: void{
this.fooBehaviourSubject = new BehaviorSubject<boolean>(1); // 1 is the "stack" size
this.fooBehaviourSubject.next(true); // <- First value emitted here
}
function getValue: BehaviourSubject<boolean> {
return this.fooBehaviourSubject;
}
When you subscribe like this:
getValue().subscribe(e => console.log(e))
the last stored value (true) automatically will be retrieved and shown in console, but ensure you at least have emitted one first, or you wont execute the subscription until one next method is called. After that, every update of the value will trigger that console.log with the updated value.
Applied to your code, you could create the BehaviourSubject in the ngOnInit, subscribe to it also in the ngOnInit to define the callback event, and call the next method of the BehaviourSubject once the list must be updated.
export class PageComponent implements OnInit {
questions$: Observable<any[]>
hasChange: boolean
ngOnInit() {
// GETTING INITIAL VALUE
let hasSome = false
this.questions$
.subscribe((quest: any[]) => {
// ### This is works for me!
hasSome = quest.some(item => item.id === 'whatever')
// ### This is the way that I was trying to do.
// ### Is's not wrong but didn't work for me =(
// this.hasChange = quest.some(item => item.id === 'whatever')
)
this.hasChange = hasSome
}
calculate() {
// calling a request
// at this point, my observable will update and will have 4 items.
}
onNextButton() {
// ### Now this.hasChange is assigned once and where I want, OnInit.
if (this.hasChange) {
// submit()
} else {
// navigate()
}
}
}
I have a component with 2 inputs (or mor) and I want to:
Trigger a method X the first time, when both value are set and exists
Trigger a method X each time, if either one of the both value changes
<some-cmp [itemid]="activeItemId$ | async" [userId]="activeUserId$ | async"></some-cmp>
Both values can change at any time, so I figured using rxjs to build a stream lets me control everything. My current solution seems a bit hacky and is difficult to test. I use 2 BehaviourSubjects and combineLatest with a debounceTime.
#Input() set itemId (id){this.itemId$.next(id)};
#Input() set userId (id){this.userId$.next(id)};
itemId$ = new BehaviourSubject$(null);
userId$ = new BehaviourSubbject$(null);
ngOnInt(){
combineLatest([
this.itemId$.pipe(filter(item=>item!===null)),
this.userId$.pipe(filter(item=>item!===null))
]).pipe(
debounceTime(10),
switchMap(...)
).subscribe(...)
}
So my question are
Is there a more elegant way to achieve this behavior?
Is there a way to avoid the debounceTime, which makes testing difficult?
The debounceTime is used in case both value do arrive at the same time and I don't want combineLatest to trigger the method twice.
You are right in using combineLatest, it will only emit the first time after each source has emitted once and then will emit any time any source emits.
Is there a way to avoid the debounceTime. [It] is used in case both value do arrive at the same time and I don't want combineLatest to trigger the method twice.
Maybe debounceTime isn't necessary due to the initial behavior of combineLatest; it will not emit the first time until all sources emit. However if you typically receive subsequent emissions from both sources that occur within a short timeframe, use of debounceTime may be an appropriate optimization.
Is there a more elegant way to achieve this behavior?
I think your code is fine. However, it may not be necessary to use BehaviorSubject since you aren't really using the default value. You could use plain Subject or ReplaySubject(1).
You could assign the result of your combineLatest to another variable and subscribe to that inside ngOnInit or use the async pipe in the template:
#Input() set itemId (id){ this.itemId$.next(id) };
#Input() set userId (id){ this.userId$.next(id) };
itemId$ = new Subject<string>();
userId$ = new Subject<string>();
data$ = combineLatest([
this.itemId$.pipe(filter(i => !!i)),
this.userId$.pipe(filter(i => !!i))
]).pipe(
debounceTime(10),
switchMap(...)
);
ngOnInit() {
this.data$.subscribe(...);
}
Angular provides ngOnChanges hook which can be used in this scenario. It'll trigger ngOnChanges method whenever there's a change in any of the inputs of the component.
Below is an example of how this can be achieved:
export class SomeComponent implements OnChanges {
#Input() itemId: any;
#Input() userId: any;
ngOnChanges(changes: SimpleChanges) {
const change = changes.itemId || changes.userId;
if (change && change.currentValue !== change.previousValue) {
this.doSomething();
}
}
private doSomething() {
// Your logic goes here
}
}
Your HTML will now look clean and you can get rid of async as well:
<some-cmp [itemid]="itemId" [userId]="userId"></some-cmp>
I'm a little bit confused as why the following snipped works as expected.
The idea of this service is to have a list of strings where if you add a string, it is removed 5 seconds later. Rxjs is used here:
#Injectable()
export class ErrorService {
private errors: Array<string> = [];
private emitErrorsChanged = new Subject<any>();
public emitErrorsChanged$ = this.emitErrorsChanged.asObservable();
constructor() {
this.emitErrorsChanged$.delay(5000).subscribe(
() => {
if (this.errors.length > 0) {
this.errors.shift();
}
}
);
}
public emitErrorChange(error: string) {
this.errors.push(`${error}`);
this.emitErrorsChanged.next(this.errors);
}
}
An error component is subscribed to this service errorService.emitErrorsChanged$.subscribe(...) and shows the strings in a list. Other components/services add strings by this.errorService.emitErrorChange(error.message).
My question is: why are the removed errors (5s) emitted to the error component? The errors are just removed from the list this.errors.shift(); but the change is not emitted by this.emitErrorsChanged.next(this.errors);
The behavior occurs because you are passing reference to your object (list in this case). The changes made by this.errors.shift(); are not emitted, but I guess you can see current state of this.errors thanks to Angular's change detection. I have prepared a demo (click) so you can see that the object reference is passed in your case - what means that the list in subscription is the exactly same array list. To prevent it you can pass a copy of your list, e.g. using spread operator like in this example:
this.emitErrorsChanged.next([...this.errors]);
I have a property on my service class as so:
articles: Observable<Article[]>;
It is populated by a getArticles() function using the standard http.get().map() solution.
How can I manually push a new article in to this array; One that is not yet persisted and so not part of the http get?
My scenario is, you create a new Article, and before it is saved I would like the Article[] array to have this new one pushed to it so it shows up in my list of articles.
Further more, This service is shared between 2 components, If component A consumes the service using ng OnInit() and binds the result to a repeating section *ngFor, will updating the service array from component B simultaneously update the results in components A's ngFor section? Or must I update the view manually?
Many Thanks,
Simon
As you said in comments, I'd use a Subject.
The advantage of keeping articles observable rather than storing as an array is that http takes time, so you can subscribe and wait for results. Plus both components get any updates.
// Mock http
const http = {
get: (url) => Rx.Observable.of(['article1', 'article2'])
}
const articles = new Rx.Subject();
const fetch = () => {
return http.get('myUrl').map(x => x).do(data => articles.next(data))
}
const add = (article) => {
articles.take(1).subscribe(current => {
current.push(article);
articles.next(current);
})
}
// Subscribe to
articles.subscribe(console.log)
// Action
fetch().subscribe(
add('article3')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>
Instead of storing the whole observable, you probably want to just store the article array, like
articles: Article[]
fetch() {
this.get(url).map(...).subscribe(articles => this.articles)
}
Then you can manipulate the articles list using standard array manipulation methods.
If you store the observable, it will re-run the http call every time you subscribe to it (or render it using | async) which is definitely not what you want.
But for the sake of completeness: if you do have an Observable of an array you want to add items to, you could use the map operator on it to add a specified item to it, e.g.
observable.map(previousArray => previousArray.concat(itemtToBeAdded))
ex from angular 4 book ng-book
Subject<Array<String>> example = new Subject<Array<String>>();
push(newvalue:String):void
{
example.next((currentarray:String[]) : String[] => {
return currentarray.concat(newValue);
})
}
what the following says in example.next is take the current array value Stored in the observable and concat a new value onto it and emit the new array value to subscribers. It is a lambda expression.I think this only works with subject observables because they hold unto the last value stored in their method subject.getValue();
I have 2 components - object-list and search-filter in my app. Also I have a fetch-service with getObjects(page, filter) method. I want to implement a scenario where object-list fetches all data via getObjects method and then search-filter will apply some filters to getObjects and object-list should automatically update. Here is some code:
FetchService
objects: Observable<any>;
getObjects(page: number, filter): void {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
const offset = (page - 1)* this.pageSize;
let url = this.objectsBaseUrl;
//apply filter
if (filter) {
url = `${url}?filter=${JSON.stringify(filter)}`
}
this.objects = this.http.get(url)
.map((response: Response) => {
return response.json() || {}
})
.catch(this.handleError);
}
ObjectListComponent
constructor(private fetch: FetchService) {}
ngOnInit(): void {
this.fetch.getObjects(this.initialPage);
this.objects = this.fetch.objects; // I need an Observable object to use with async pipe with *ngFor
}
getPage(page: number) {
this.fetch.getObjects(page); //here this.objects variable probably should be update because this methods replaces this.fetch.objects
}
SearchFilter
constructor(private fetch: FetchService) {}
apply() {
//some filter calculations
this.fetch.getObjects(1, this.filter);
}
I don't use subscribe to objects because I put it to async pipe in *ngFor. But as far as I'm concerned async pipe uses subscribe inside. The problem is that the list updates only once when ngOnInit fires. What's going wrong?
The SearchFilter component should NOT be in charge of fetching the data.
Here's how I would do it:
1) Create 3 components
A parent component, aka "smart component", to handle all the logic of listening to filter changes and fetching the data with FetchService. The parent component has two children displayed in its template:
First child: SearchFilterComponent is a "dumb component" (or presentational component). Its only job is to emit an #Output event every time the filters change, passing the latest filter values to its parent.
Second child: ObjectListComponent is also a "dumb component". Its only job is to display the list of objects provided by its parent component via an #Input property.
2) Implement the following workflow
When filters change in SearchFilterComponent, emit an #Output event passing the latest filter values, e.g. this.filtersChanged.emit(filters).
In the parent component, listen to filter changes with <search-filter (filtersChanged)="getObjects($event)">. The getObjects(filters) method will re-fetch the objects on every filter change; it should store the fetched objects in a property of the parent component, let's call it results.
Then, the parent component passes results to its child component ObjectListComponent via an #Input property called objects: <object-list [objects]="results">. The object list should refresh automatically every time the input changes.
Hopefully my explanations will make sense. Read up on #Input and #Output on the angular.io site if you're not familiar with those. I don't have time to create a Plunkr, so please post questions if anythings seems unclear.