Troubleshooting the issue of the Delete Service not functioning properly within Angular

ListStore.ts file

export class ListstoreComponent implements OnInit {
  rawlist;
  name = '';
  id = '';
  storeid = "";
  store: Store;

  constructor(private api: APIService, private router: Router, private route: ActivatedRoute, private cookieService: CookieService) { }

  ngOnInit() {
    this.fetchStoreList();

  }

  //fetch store list
  async fetchStoreList() {
    this.rawlist = await this.api.ListStores();
    this.storelist = this.rawlist.items;
  }
  //delete store
  async deleteStore(id) {
  if (window.confirm('Are you sure, you want to delete?')){
    await this.api.DeleteStore(id).catch(data => {
      this.refreshStoreList();
    })
  }
} 

HTML File

 <button type="button" class="btn btn-primary btn-gap" (click)="deleteStore(Store.id)">Close Ticket</button>

I'm removing the list and updating database. I am uncertain whether catch() would function as expected. I attempted subscribe but it did not work.

Answer №1

Your event handler needs to handle the asynchronous nature of the call instead of passing it up to the HTML content.

deleteStore(id): void {
  if (!window.confirm('Are you sure, you want to delete?')){
    return;
  }

  this.api.DeleteStore(id).then(message => {
    // handle response
  });
}

Edit:

You could manage it in the HTML, but you'd have to return a promise from the event handler, leading to more code cluttering your HTML structure.

If you prefer using the async await syntax, you can achieve the same functionality with the following approach:

async deleteStore(id): void {
  if (!window.confirm('Are you sure, you want to delete?')){
    return;
  }

  const message = await this.api.DeleteStore(id);
  // handle response
}

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

Issue: Unable to locate module: Error: The system is unable to find the src/app/app.component.css file?ngResource Angular

I am encountering three issues that I cannot seem to pinpoint the mistakes. Error: Module not found: Error: Unable to locate 'C:/Users/DexSh/desktop/C# Angular/Testing/src/app/app.component.css?ngResource' in 'C:\Users\DexSh\ ...

Exploring potential arrays within a JSON file using TypeScript

Seeking guidance on a unique approach to handling array looping in TypeScript. Rather than the usual methods, my query pertains to a specific scenario which I will elaborate on. The structure of my JSON data is as follows: { "forename": "Maria", ...

Utilizing conditional date parameter in Angular's in-memory web API for an HTTP request

In my current project, there is a collection of objects referred to as members members = [ {id:'1', firstName:'John', lastName:'Black', birthDate:'1956-11-22', gender:'Male', email:'<a href="/c ...

"Encountering a 400 bad request error when making a Graphql POST

Seeking assistance with my graphql code. I have included the service and component files below. I am currently new to graphql and not utilizing the apollo client; instead, I am attaching a query on top of the HTTP POST call to send requests to the graphql ...

Examining form functionalities: angular2 form testing

Currently, I'm facing an issue while attempting to test a component that utilizes 'FormGroup' and 'FormBuilder'. Whenever I run the test file for this particular component, I encounter an error stating that 'FormGroup' an ...

Tips for bringing in an enum from TypeScript?

I am working with a module defined in TypeScript that looks like this: declare module MyTypes { export enum MyEnum { GOOD = 'Good', BAD = 'Bad', UNKNOWN = '-' } export interface MyType1 { ...

The presence of HttpInterceptor within a component is causing a ripple effect on all of the App

I am encountering an issue with a library I have that includes a component. This component has an HttpInterceptor that adds a header to each of its requests. The problem arises when I use the component in another project - the HttpInterceptor ends up addi ...

Angular Boilerplate is experiencing difficulties in properly reading ABP

Working on my boilerplate project, I am now diving into consuming backend services (using asp .net) in Angular through http requests. However, I encountered an issue when trying to implement the delete method in mycomponent.ts, as TypeScript was not recogn ...

The Network plugin is having issues with the PWA application in Ionic 4

I've been utilizing the network plugin successfully on native/Cordova devices. However, I have encountered an issue when trying to use it on a PWA app (specifically when there is no wifi connection). Can anyone shed light on why this might be happenin ...

How to pass parameters between pages in Ionic 2 using navParams when the return nav button is clicked

Is there anyone familiar with how to return a simple value (or JSON) by clicking on the return button in Ionic 2's navigation bar? I understand that navParam can be used to send a value when pushing a page, but I am unsure how to implement the same fu ...

Tips to avoid multiple HTTP requests being sent simultaneously

I have a collection of objects that requires triggering asynchronous requests for each object. However, I want to limit the number of simultaneous requests running at once. Additionally, it would be beneficial to have a single point of synchronization afte ...

Troubleshooting Component Sharing in Ionic 4 with Angular 7

I'm attempting a common task with Angular framework - reusing the same HeaderComponent component in multiple instances through a shared module. This is how my shared.module.ts looks: import { CommonModule } from '@angular/common'; import { ...

Check out the attributes of a class

I have a TypeScript class that is defined like this: export class MyModel { ID: number; TYPE_ID: number; RECOMMENDED_HOURS: number; UNASSIGNED_HOURS: number; } In a different .ts file, I instantiate this class within a component: export class My ...

The method Office.context.mailbox.item.internetHeaders.setAsync has not been configured

I am integrating the Microsoft Office API into Outlook. I'm attempting to add an extra x-header to my email in the composer scope for later identification. To achieve this, I referred to the following documentation: https://learn.microsoft.com/en-us/j ...

Are you encountering issues with Google Analytics performance on your Aurelia TypeScript project?

I recently started using Google Analytics and I am looking to integrate it into a website that I'm currently building. Current scenario Initially, I added the Google Analytics tracking code to my index.ejs file. Here is how the code looks: <!DOC ...

What are some methods for utilizing the "name" attribute within React components?

About My Coding Environment Utilizing TypeScript and ReactJS The Issue with Using name as an Attribute Encountering the following error: Type '{ name: string; "data-id": string; "data-type": string; }' is not assignable to ...

Unable to open modal window in Angular 14 micro-frontend application

I've been working on a micro front end project and running into some issues with opening modal popup windows. I've tried both the Angular material and bootstrap approaches, but ran into problems with both. With Angular material, the popup window ...

Specifying data type in the fetch method

Screenshot depicting fetch function I'm currently working on a project using Next.js with Typescript and trying to retrieve data from a Notion database. I've encountered an error related to setting up the type for the database_id value. Can anyon ...

Filtering the JSON data shown according to an array in Angular 7

After receiving JSON data from the backend using a service, I am displaying it through a loop in main.html. There is an array that contains the values of a column being displayed. For example, if the array looks like this: colors=[red,blue], then only reco ...

Having some issues with ng-hide in angular, it doesn't seem to be functioning properly

<nav class="menu-nav"> <ul> <li class="menu-li" ng-model="myVar"><a>Discover<i class="fa fa-chevron-down pull-right"></i></a> <div class="sub-menu" ng-hide="myVar"&g ...