Nsryjdtyk

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!

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;}

   );

}