How do I refresh a page in Angular after a click event, without reloading it? I'm developing an ecommerce frontend in Angular material. I want that after the following click event on the button Remove, the page is refreshed in order to not see the element removed anymore. It's important for me that the page isn't reloaded, because if it were reloaded I would lose all the operations done before the click event.

<a mat-raised-button  routerLink="." color="accent" (click)="deleteProduct(productInCart.product.id, currentUser.id, productInCart.quantity, productInCart.product.price)" routerLink="/carts/cart_by_user"  routerLinkActive="active">Remove</a>

CodePudding user response：

You don't need to refresh the page - your concern should instead be to change the data behind it and have Angular update the UI automatically, without refreshing the page, as a result. My suggestion is to follow the Tour Of Heroes tutorial at https://angular.io/tutorial - it covers the scenario you describe and also introduces other Angular concepts you need to grasp.