I delete a datarow from my database but not from my webpage until i refresh it. How can i delete that row immediately from my table in Angular5

Question

i'm using WebApi for backend and Angular 5 for frontend, webapi are connected to a DB from which I take the data to be included in my site. When i press on "delete" button, the data is delited from my database but not from my webpages, and in Angular(as far as I know, I'm a beginner) the page would be refresh instantly. Console didn't gave me an error so i think probably it's a route configuration error. Maybe i would use the ActivatedRoute, because the page has

RouterModule.forChild([

{path:'mioprofilo', component: MyProfileComponent},

Anyway my deleted method in my-profile.component.service.ts is:

deleteRelative(id: number): Observable<Relative>{
        const url =  `${this.relativeUrl}/${id}`;
        return this.http.delete<Relative>(url).pipe(
        tap(rel => console.log( `deleted relative id=${id}`)),
        catchError(this.handleError)
    );
}       

And this is the method i call with the click event in my-profile.component.ts:

delete(id:number): void {
   this.myProfileService.deleteRelative(id).subscribe(
   data=>{this.route;
});

That is my-profile.component.html with a ngif to test the presence of the data in db and an ngfor* to create a table with the db data:

        <table *ngIf = 'relatives && relatives.length'
        class="table" id="myTable" style="margin:20px; width: 90%;border-style: outset">
            <thead>
                <tr>
                <th>Cognome</th>
                <th>Nome</th>
                <th>Telefono</th>
                <th>Relazione</th>
                <th></th>
                <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor ='let rel of relatives'>
                    <td>{{rel.lastName}}</td>
                    <!-- <td><input type="text" name="name" [(ngModel)]=rel.lastName></td> -->
                    <td>{{rel.firstName}}</td>
                    <td>{{rel.phone}}</td>
                    <td>{{rel.relationType}}</td>
                    <td>
                    <a (click)="delete(rel.relativeId)" ><img src="/Images/elimina.png"/></a>
                    </td>
                    <td>
                        <input class="Caregiver" type="checkbox" value="Caregiver">
                        <span>Caregiver</span>
                    </td>
                </tr>
            </tbody>
        </table>

I think can be useful to find help me to find a solution if i post below my app.component.module.ts:

@NgModule({
  declarations: [
AppComponent,
WelcomeComponent//,
//CalendarComponent,
   ],
  imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
  {path: 'home', component: WelcomeComponent},
  {path: '', redirectTo:'home',pathMatch:'full'},
  {path:'**', redirectTo:'home', pathMatch:'full'}
]),
MyProfileModule,
CalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you need some other code from me do not be afraid to ask me. WebApi work very good so the problem must be in my angular code. Thanks all!

Answer 1

Because you are using *ngFor ='let rel of relatives' for your <tr>'s all you need to do is remove that deleted data from your relatives array. This will trigger angular to refresh that component with the new data; removing the deleted item from your table.

To do this, you can use splice:

relatives.splice(arrayIndex, 1);

so...

delete(id:number): void {
   this.relatives.splice(arrayIndex, 1);
   this.myProfileService.deleteRelative(id).subscribe(
      data=>{this.route;}
   );
}