Angular 6 Updating Observable

Question

Hi i'am new to Angular 6 and can't make things work after several researching. I have a list coming from jsonplaceholder.typecode.com and as i have read its docs, I can post, delete, and update but how can i make my list change async'ly as i perform those methods.

this are my methods from a service

getContacts(){
return this.contact = 
 this.http.get('https://jsonplaceholder.typicode.com/users');
}

getUser(id){
 return this.http.get('https://jsonplaceholder.typicode.com/users/'+id);
}

addContact(newContact: Contact){
 return this.http.post('https://jsonplaceholder.typicode.com/users', 
newContact);
 }

 removeContact(contact){
  return 
 this.http.delete('https://jsonplaceholder.typicode.com/users/'+contact.id);
}

updateContact(contac: Contact){
return 
this.http.put('https://jsonplaceholder.typicode.com/users/'+contac.id, 
 contac);
 } 

Solution

Start by creating a BehaviorSubject in your service :

contacts$ = new BehaviorSubject([]);

This creates a proxy (Observable + Observer) that you can subscribe & listen to.

Now that we have that, let's populate it :

getContacts() {
  this.http.get(url).subscribe(contacts => this.contacts$.next(contacts));
}

With this code, you get the list of contacts and push it into your proxy.

addContact(newContact: Contact){
  this.contacts$.pipe(
    take(1),
    switchMap(contacts => this.http.post(url, newContact).pipe(
      map(() => [...contacts, newContact])
    )),
  ).subscribe(contacts => this.contacts$.next(contacts));
}

With this one, you create a new contact and append it to your list of existing contacts.

By creating a proxy, you create a datasource, that you handle with your HTTP calls.

For instance, in the first method, I emit a value that is the array of contacts. Every listener (i.e. everywhere you have written this.myService.contacts$.subscribe) will receive this value.

In the second one, I start be getting the list of contacts and listen to a single event (i.e. future calls to contacts$.next won't do anything to this subscription). Then, I request a contact creation, and once done, I create a new datasource containing the previous contacts, plus the new contact, and then emit an event.

This isn't very clear and it can seem exhausting to learn, but once you can use it, it becomes very powerful.

Now that you have the basics, I'll let you handle update and delete, because I'm not here to code for you !

And if you have any issues with thise code, then I suggest you read the documentation and make several tutorials about RxJS, because really, this is very powerful, and you almost always use it with Angular.

Comments

[Zooly]

Your get method is weird, why do you need to return an affectation? I mean, why not simply : return this.http.get...

[Pardeep Jain]

What type of change you want?

[Sulaiman Triarjo]

how about if I need to read the respons from server and do something about it at component.ts e.g add id from db after post to newContact? I usually return Promise to do that something.

[Admin]

@SulaimanTriarjo you should use observables, turning the response into a promise is a downgrade. And that doesn't change the logic behing it.