I'm stumped when it comes to removing values in Angular7

I am currently utilizing Angular7 in conjunction with the Loopback API to manage data. I am seeking assistance on how to implement a delete functionality within tables. Could you please offer some guidance?

Despite my attempts, the code I have implemented so far does not seem to be functioning properly. Below is the snippet of code I have used:

file.component.html

<td><button class="btn btn-success" (click)="deleteUser(user)"> Delete</button></td>

file.component.ts

deleteUser(user: User): void {
this.apiService.deleteUser(user.id);
};

api.service.ts

deleteUser(id: number): Observable<ApiResponse> {
return this.http.delete<ApiResponse>(this.baseUrl + id);
}

Additionally, could you provide me with the codes for other operations such as update and create as well?

Answer №1

One key issue here is that you failed to subscribe, resulting in the request not being sent.

removeUser(user: User): void {
   this.userService.removeUser(user.id).subscribe();
};

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

The issue of Kendo Angular 2 Grid 0.12.0 failing to compile in AOT mode

After recently upgrading from version 0.7.0 to 0.12.0 for the Kendo Grid in Angular 2 (@progress/kendo-angular-grid), I encountered an issue with compiling my app using AOT mode. While the app compiles successfully without AOT, it fails when attempting to ...

Migrating the Angular application from version 4.x.x to 6.0

I am currently working on a large open source project built on Angular 4. The project has many components and I am facing challenges in updating it to Angular 6. Even though the official site https://update.angular.io/ provides guidance, manually searchi ...

What is the process of transforming numerous MySql join queries into Hibernate Queries?

My MySQL query involves multiple joins as shown below: StringBuilder str_Resource=new StringBuilder(); str_Resource.append("SELECT * FROM BUS_TRANSPORT.TRIP_CALENDAR JOIN BUS_TRANSPORT.ROUTE_MASTER ON BUS_TRANSPORT.TRIP_CALENDAR.ROUTE_CODE=BUS_TRANSPORT. ...

Is there a way to determine the completion status of a connected account using the Stripe API?

I need to confirm if a user has completed the onboarding process with Stripe on my website using their API. The Accounts object in Stripe API documentation does not seem to provide information about the completion status. If the onboarding is not complete, ...

What is the best way to retrieve the row that comes before and after the specified query in a database?

Imagine a scenario where you need a query to fetch "posts" within a specific time frame defined by a "from" and "to" date. Sounds simple, right? In addition, I also require retrieving one record before and one record after the specified query results. Co ...

Encountering difficulties installing npm bootstrap@3 within the Angular framework

Recently, I started learning Angular and decided to integrate Bootstrap into my Angular project. However, when I entered npm install --save bootstrap@3 into the terminal, the following warning messages were displayed: C:\Users\ssc\Angular-T ...

There seems to be an issue with loading fonts properly in the combination of Webpack and

I'm currently working on setting up the latest Angular2 with webpack without using the angular CLI. However, whenever I try to build my project, I keep encountering errors related to fontawesome fonts. Here's an example of the error message: ERR ...

Receiving multiple Firebase notifications on the web when the same application is open in multiple tabs

I have implemented firebase push notifications in Angular 7 using @angular/fire. However, I am facing an issue where I receive the same notification multiple times when my application is open in multiple tabs. receiveMessage() { this.angularFireMess ...

How can I transfer the output of a Mysql query to an Excel file?

I need to save all the results from this specific query: SELECT * FROM document WHERE documentid IN (SELECT * FROM TaskResult WHERE taskResult = 2429) into an Excel spreadsheet. ...

Ways to limit the information being inserted into a MySQL database

In a table with 4 groups named GroupA, GroupB, GroupC, GroupD, each column should only accept up to 5 values in MySQL. How can this restriction be implemented? GroupA GroupB aaa fff bbb ggg ccc iii ddd eee ...

How to display the menutoggle button in a child page using Ionic 2

Is there a way to display the 'menu toggle' button on subpages of the side menu application? Currently, only the root page has the menu toggle button while the child pages have the back button. ...

Replace FormControl.disabled by using a CSS or HTML attribute

I have a customized angular date picker where I want to restrict user input by disabling the input field and only allowing selection from the date picker. However, using the "disabled" attribute on the input element is not an option due to conflicts with t ...

modify the background color at core.scss line 149

I am struggling to change the background color of my Ionic login page. I have tried adding custom CSS in various places, such as core.scss:149, but it only works when I add it directly in Chrome developer tools. How can I get this custom background color t ...

The attribute 'loaded' is not found in the 'HttpSentEvent' data type

Currently, I have implemented an Angular HTTP post request with the following parameters: this.http .post<{ body: any }>(environment.api.file.upload, reqBody, { reportProgress: true, observe: 'events', }) .subscribe((ev: HttpE ...

Problem encountered while saving data to firestore

Encountering difficulties when attempting to save and retrieve data from firestore. The code snippet provided below is failing, despite its simplicity and my stable internet connection. Even upgrading to websdk 5.0.4 has not fixed the issue. save = async ...

Sluggish behavior detected in hybrid AngularJS and Angular application when accessed through Safari browser

Lately, I have embarked on the task of migrating an AngularJS application to Angular 4 using the upgrade module. Within my AngularJS directives, I am utilizing a third-party library (ngFlow) for file uploads via XMLHttpRequest.send(). Everything functions ...

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Currently, I am utilizing d3.js version 6 to generate a 3D representation of the 2D chart shown below. Within this circle are numerous squares, each colored based on its assigned value. The intensity of the color increases with higher values. https://i.ss ...

Finding the Maximum Value in Each Group in mySQL

I've been working on this code for a while now. Initially, I set up my SQL table as char instead of decimal because I only want the number to display a decimal value when necessary (is there another way to achieve this?). Although I make it decimal wi ...

What is the best way to encode tags within an article?

I am working with a basic WYSIWYG editor within a PHP form. An example of what the form returns is: Lorem ipsum dolor sit amet, consectetur <h2>adipiscing elit</h2>. Nunc consectetur metus libero. eleifend ultricies. Pellentesque et <img sr ...

The module does not contain 'toPromise' as an exported member in rxjs version 5.5.2

Encountering an error when using toPromise Prior method: import 'rxjs/add/operator/toPromise'; Updated approach: import { toPromise } from 'rxjs/operators'; The new way is causing the following issues: [ts] Module '"d:/.../ ...