How to subscribe to an observable multiple times?

Question

In the ngOnInit() of my Angular app, I'm subscribing to an Observable like so:

ngOnInit() {
    this.loadArtistTable();
    }

loadArtistTable(): void {
    this._artistService.getArtists().subscribe(
        (artistList) => this.artists = artistList,
        (err) => console.log(err)
    );
}

This is working fine as the artist details are being retrieved & displayed in a table:

<tr *ngFor="let artist of artists">
    <td>{{artist.fullName}}</td>
    <td>{{artist.email}}</td>
    <td>{{artist.phone}}</td>
    <td>{{artist.contactPreference}}</td>
    <td><button class="btn btn-primary" (click)="editButtonClick(artist.id)">Edit</button></td>
</tr>

I then have a form which I use to update Artist details. After I update the details & click Save, a PUT request is sent & the Artist is updated successfully.

When I refresh the browser, the new Artist details are being displayed.

Now, I am trying to refresh the Artist table when the Save button is clicked. Here is the code executed when I click Save:

onSubmit(): void {
    this.mapFormValuesToEmployeeModel();
    this._artistService.updateArtist(this.artist).subscribe(
        () => console.log('artist updated successfully'),
        (err: any) => console.log(err)
    );
    this.loadArtistTable();
}

As I mentioned above, the artist is being updated, but the table is not being populated with the latest data when the button is clicked.

Can someone please tell me why this.loadArtistTable(); isn't being executed in my onSubmit() function, & a possible solution? Thanks a lot.

Try moving `this.loadArtistTable();` inside of the `subscribe` callback. — ConnorsFan, May 14 '19 at 18:49

score 0 · Accepted Answer · edited May 15 '19 at 09:23

Resolved this by placing this.loadArtistTable() inside the subscribe callback like so:

onSubmit(): void {
    this.mapFormValuesToEmployeeModel();
    this._artistService.updateArtist(this.artist).subscribe(
      () => (console.log('artist updated successfully'), this.loadArtistTable()),
      (err: any) => console.log(err)
    );
}

————————————— Warning: For every update record you are calling list of 1000 records which been a load when record increases so when you update record you have to update particular record from list using splice

How to subscribe to an observable multiple times?

1 Answers1