Angular 6 add items into Observable
If this.contacts
is an Observable of list of objects (contacts: Observable<Items[]>
) and you want to make some changes to that list, you can simply use tap
:
import { tap } from 'rxjs/operators';
this.contacts.pipe(tap(usersList => {
usersList.push(newItem);
}));
But if you want to make another request to the server and merge these lists, you can use merge
:
import { merge } from 'rxjs';
merge(
this.contacts,
this.http.get('https://jsonplaceholder.typicode.com/other_users');
).pipe(
map(data => {
const [currentResult, pastResult] = data;
// ...
}
));
Update
Based on your comment for more details, you don't need to do anything with observables. What you need is something like this:
In your contacts.service.ts
:
getContacts(){
return this.http.get('https://jsonplaceholder.typicode.com/users');
}
In your contacts.component.ts`:
contacts: any[] = [];
ngOnInit() {
this.contactsService.getContacts().subscribe(data => {
this.contacts = data;
});
}
addContact(item) {
this.contacts.push(item);
}
But if you want to have your contacts list as an Observable, you should use a Subject
.
In your contacts.service.ts
:
contactsChange$ = new Subject<any>();
private contactsList = [];
getContacts(){
return this.http.get('https://jsonplaceholder.typicode.com/users').pipe(tap(data => {
this.contactsList = data;
this.contactsChange$.next(this.contactsList);
}));
}
addContact(item) {
this.contactsList.push(item);
this.contactsChange$.next(this.contactsList);
}
In your contacts.component.ts`:
contacts: any[] = [];
ngOnInit() {
this.contactsService.getContacts().subscribe(data => {this.contacts = data});
this.contactsService.contactsChange$.subscribe(data => {this.contacts = data});
}
Working With Observable
In Your Service
private contactInsertedSubject = new Subject<Contact>();
contactInsertedActions$ = this.contactInsertedSubject.asObservable();
public contacts$ = this.http.get<Contact[]>(this.contactsUrl)
.pipe(
// tap(data => console.log('Contacts: ', JSON.stringify(data))),
catchError(this.handleError)
);
public contactsWithAdd$ = merge(this.contacts$, this.contactInsertedActions$)
.pipe(
scan((acc: Product[], value: Product) => [...acc, value])
);
addContact(newContact?: Contact) {
this.contactInsertedSubject.next(newContact);
}
Your Contact Component Class
contacts$ = this.contactService.contactsWithAdd$;
onAdd(): void {
this.contactService.addProduct();
}
when this add method will call the subject in service will emit the value and merge observable has two input observable if any one will emit value so this will call automatically and then in pipe map operator will do the insertion job and contactWithAdd observable will have updated list.