current-pattern.component.ts

// there are examples I have where I would need to use load() as a callback after mutating the service collection
// I know there are 'hacks' to repaint the dom with ng1
// point is we have to worry about or data being up to date in the view 

load() {
  this.service.load() // here you may recieve a promise or observable depending on which angular version you're in
    -> this.collection = response;
}

save(item) {
  this.service.save()
    -> this.collection = this.service.collection;
}

delete(item) {
  this.service.delete()
    -> this.collection = this.service.collection;
}

current-pattern.service.ts

// the current pattern is to manipulate and store a copy of our collection as a service property
// we can then load this collection into our child components an upon updating the collection we can then reload 

load() {
  http.get() // this can be $resource or ng2 Http service. The idea is that we get some data.
    -> this.collection = responseFromServer;
}

save(item) {
  http.post() // in this app we always get a 200 back 
    -> this.collection.push(item);
}

delete(item) {
  http.delete() // in this app we always get a 200 back 
    -> this.collection.filter(collection => collection.id !== item.id);
}

rxjs-more.component.ts

// here are some more front end examples of rxjs I'm using in practice

// I have a typeahead that seraches through an array of objects. 'skills'
searchAllSkills = (text$: Observable<string>) =>
       text$
           .do(() => this.skillSaved = false)
           .debounceTime(200)
           .distinctUntilChanged()
           .map(term => term.length < 0 ? []
               : this.skills.all.filter(v => new RegExp(term, 'gi').test(v.name)).splice(0, 10));
               
// On submit of a an item I need to know that the server responded with a 200 and then clear the text input
typeaheadOnSubmit(event: Event) {
  this.service.save(this.customSkillGroup.value.customSkill); // this.customSkillGroup is an object created for my form .value is the text found within the input box
        
  this.service.skillsCurrent$
    .subscribe(() => {
      this.customSkillGroup.value.customSkill = null;
      this.skillSaved = true;
    });
}

// here is a simple button click that I wanted to add a debounce to so an animation could complete
delete = (item$: number) =>
    Observable.of(item$) // I'm turning the item argument into an observable so I can use rxjs instead of another lib or timeout
      .debounceTime(800)
      .subscribe(() => this.service.delete(item$));

rxjs.component.ts

load() {
  this.service.collection$
    .subscribe(res => this.collection = res); // so now anytime we emit .next() on collection$ within the service. This will be up to date.
}

save(item) {
  this.service.save(item); // no need to do anything for the local copy of the collection. The service will do it and our local this.collection is listening to those changes
}

delete(item) {
  this.service.delete(item);
}

rxjs.service.ts

// with rxjs we can create a Subject that we push data to as needed
// when the subject emits that it has been updated all of it's subscribers update automatically
// https://github.com/ReactiveX/rxjs/blob/e061a046305d35fce25cb864878c0b13bd2970f0/doc/subject.md

public collection$: Subject<any> = new ReplaySubject(1); // In this case I'm using ReplaySubject(1) so that subscribers only ever get the last emited collection. 

load() {
  http.get()
    .subscribe(res => {
      this.collection = res; // we can keep a local service copy as this will allow for some internal mutation of the collection if needed
      this.collection$.next(this.collection); // here we tell our Subject to emit to our subscribers.
    });
}

save(item) {
  http.post()
    .do(this.collection.push(item))
    .subscribe(() => this.collection$.next(this.collection));
}

delete(item) {
  http.delete()
    .filter(collection => collection.id !== item.id)
    .subscribe(() => this.collection$.next(this.collection));
}