Angular 13: Delete request to api with some effects

Question

I have an frontend app that I have connected to my backend it works well but when I delete the div with post it disappears unclear, I need to add some effects to it so I can see that the post really disappears in my eyes. I know it's not hard but I'm a newbie in Angular and this is my first frontend app

Delete Post Method:

deletePost1(id:number){
    this.messageService.delete(id).subscribe(res => {
      this.messages = this.messages.filter(item => item.id !== id);
      console.log('Post deleted successfully!');
    })
  }

delete post method from service:

delete(id: number) {
    return this.httpClient.delete(this.apiURL + 'api/message/' + id, this.httpOptions)
      .pipe(
        catchError(this.errorHandler)
      )
  }

Answer 1

You can display a message using the ngx-toaster package

First install it using npm :

npm install ngx-toastr

Then add it to your app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { ToastrService } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      tapToDismiss: false,
      autoDismiss: true
    })
  ],
  providers: [
    ToastrService
  ],
  bootstrap: [AppComponent],
  schemas: []
})
export class AppModule { }

Then in your component create deletePost() like this :

constructor(
    private toastr: ToastrService
  ) { }

deletePost1(id:number) {
    this.messageService.delete(id).subscribe(res => {
        this.messages = this.messages.filter(item => item.id !== id);
        this.toastr.success("Post deleted successfully!", 'success', { timeOut: 2500 });

    })
}