Erasing information and then moving to the identical webpage

The HTML Content :

<td>
 <a (click)="onDelete(item.id)">
 <i class="material-icons" style="font-weight:bold; font-style:inherit ;color: rgba(247, 37, 37, 0.884);">
 delete_outline
 </i>
 </a>
 </td>

The corresponding TS File :

onDelete(id) {
  console.log(id);
  this.blogId = this.id;
  const status = window.confirm('Are you sure you want to delete this id?' + this.blogId);

  if (status) {
      this.blog.deleteBlog(this.blogId).subscribe((response) => {
          this.blogId = (Response);
          alert('Successfully deleted the id');
          this.route.navigate(['/admin/blogger']);
      }, (error) => {
          console.log(error);
      });
  } 

And the service file :

deleteBlog(id: any) {
    return this.http.delete(this.mainUrl + '/blog/' + id);
}

I encountered an error in the console when passing the id as a parameter for deleting a specific record. I am unsure of my mistake here. Thank you in advance.

https://i.sstatic.net/SKo4G.png

Answer №1

Make sure you are correctly assigning the argument to this.blog

Here is an alternative solution:

onDelete(id) {
          console.log(id);
          this.blogId = id;
          const status = window.confirm('Are you sure you want to delete this id?' + this.blogId);

          if (status) {
              this.blog.deleteBlog(this.blogId).subscribe((response) => {
                  this.blogId = (Response);
                  alert('Successfully deleted the id');
                 // this.route.navigate(['/admin/blogger']);
                  this.route.navigateByUrl('/', {skipLocationChange: true}).then(()=>
                    this.route.navigate(['/admin/blogger']));
              }, (error) => {
                  console.log(error);
              });
          } 

Answer №2

html document

    <td>
        <a (click)="handleDelete(blog.id)" class="delete" title="Delete"
        data-toggle="tooltip" style="cursor: pointer;"><i class="fa fa- 
   times-circle"> 
        </i></a>
    </td>    

component file.ts

 handleDelete(id) {
    swal.fire(
        'Confirm Delete',
        'Are you sure you want to delete this blog?',
        'question').then((result) => {
        if (result.value) {
            this.layoutService.showLoading();
            this.blogService.deleteBlog(id).subscribe((response) => {
                if (response.success === true) {
                    this.layoutService.hideLoading();
                    swal.fire(
                        'Success!',
                        response.message,
                        'success').then(() => {
                        this.getAllBlog();
                    });
                }
            });
        }
      });
     } 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding supplementary text to a form input label is simple with this guide

I am new to Angular 2 and I am looking for a way to add text to form inputs that are optional. Something similar to using a directive called app-optional: <div class="form-group"> <label app-optional> Name ... input here ... </ ...

Is it more efficient to wait for the server to respond, or should I update the client immediately

Today, I found myself contemplating an interesting question. As I work on developing a Single Page Application (SPA) using Angular, I am focusing on creating a calendar module similar to Google Calendar. This module will allow users to add, edit, and remov ...

Decoding multidimensional arrays in JSON using PHP

I am extracting information from the following website: "" and converting it into JSON format using a PHP script. The JSON output appears as follows: ( [Term-array-array] => Array ( [Term-array] => Array ( [Term] => Array ( [0] => loves [1] = ...

Develop a mapping system using enums that ensures compiler errors are enforced

I am struggling to enforce a mapping on an object in TypeScript. My goal is to define a type or interface that maps from ANIMAL_PLACE to ANIMAL_TYPE. I want the type to ensure that any object created with these mappings includes both the ANIMAL_PLACE and A ...

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

Is there a solution for resolving the 'cannot post error' in nodejs?

Recently started using node.js I am currently working on a nodejs-experss-mongodb project and I am in the process of implementing a subscription feature that has the following specific requirements: Request Method: POST URL: localhost:8080/api/v1/users/: ...

How to fix the problem with return values in NodeJS (Express) and Eslint?

const checkAuthorization = function(request, response, next) { const token = request.headers.authorization; if (!token) { return response.status(401).json({ message: 'Invalid or missing token' }); } const accessToken = token.split(&a ...

Displaying tooltips with ngx-charts in Angular

Currently, I am working on developing a unique legend component that features individual material progress bars for each data entry. My goal is to display the pie chart tooltip when hovering over any of the entries within this custom legend. Below is a sn ...

Enabling users to download their data from Firebase database?

I am currently using Firebase to store my data, and I am looking for a way to allow users to export their information in JSON format. I saw that the admin can do this from the realtime database console on Firebase, so I am wondering if there is a way to cr ...

Updating the parent component upon navigating from the child component in Angular app

Struggling with updating the parent component after routing from a child component. Through research, I've learned that ngOnInit only runs once. Any way to work around this issue? I've experimented with different lifecycle hooks, but no luck so f ...

API Broker, transforming JSON into DataFrame

Recently, I encountered some challenges while trying to retrieve historical data from my broker's API (xTrade Brokers). Initially, I attempted the following code: import json import pandas as pd data=json.loads(history) dafr = pd.DataFrame(data,col ...

Standard layout for a project with equally important server and client components

We are in the process of developing an open-source library that will consist of a server-side component written in C# for Web API, meta-data extraction, DB operations, etc., and a client-side component written in TypeScript for UI development. Typically, ...

TS2688 Error: TypeScript Build Fails to Locate Type Definition File for 'mocha' Following Update

After updating my TypeScript to the latest version, I keep encountering the following error: Cannot find type definition file for 'mocha'. tsconfig.json { "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators ...

You cannot assign an array of 'Contact' objects to a single 'Contact' parameter

During the development process, I encountered an error while trying to add a new contact. The error message states: Error: src/app/contacts/contacts.component.ts:32:28 - error TS2345: Argument of type 'Contact[]' is not assignable to parameter o ...

What is the best way to retrieve a specific number of attributes from my Express API using a web browser?

Consider this scenario: If we visit the following link, we can access all JSON code: https://jsonplaceholder.typicode.com/todos However, if we only want to retrieve the first 6 elements of the JSON, we can do so by visiting this link: https://jsonplacehol ...

express-validator not providing any feedback from endpoint when integrated with TypeScript

I've been working on validating the response body for my endpoint, but I'm running into an issue where I'm not getting a response from that endpoint when using express-validator. I'm confident that I have followed the official documenta ...

Using ReactJS with Typescript: attempting to interpret a value as a type error is encountered (TS2749)

Currently, I am working on coding a ReactJS class using Typescript and Material-ui in a .tsx file. In one of the custom components that I have created, I need to establish a reference to another component used within this custom component. export class My ...

Exploring the Power of Angular 2+: Leveraging the canLoad Feature

I'm having trouble getting the canLoad function to work with routes. It seems like it's not functioning properly. I'm not sure why, maybe it's incompatible with canActivate or something, but I'm hoping someone here might know. Wh ...

Retrieving specific information from the Model and returning it as a JSON response using annotations

I am interested in receiving a JSON response with additional annotations. Currently, my JSON response looks like: { "id": 1, "startDate": [ 1993, 12, 12 ], "endDate": [ 2018, 11, 22 ], "totalDistance": 255, "totalPrice": 211 } How ...

How to use Ionic 3 to automatically scroll ion-scroll content all the way to the bottom

My ion-scroll component is experiencing some challenges <ion-scroll scrollY="true" style="height: 52vh;"> {{ text }} </ion-scroll> The content inside the ion-scroll keeps expanding, exceeding the designated height. Users can manually scroll ...