What is the best way to refresh or reload a child component in Angular?

I have a transaction.component.html file that displays the app-deal-partners component. Every time the delete function is triggered, I want to refresh and reload the child component, which is the app-deal-partners component.

I need to reload 

<app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

How can we achieve this in Angular? Thank you.

#transaction component ts code

 delete(rowData: any) {
    this.isLoading = true;
    this.Service.delete(rowData.id)
      .pipe(finalize(() => { this.isLoading = false;}))
      .subscribe({
        next: (res) => {
        },
        error: (err) => {
          this.notificationService.showError('Something went wrong, Try again later.');
          this.isLoading = false;
        },
        complete: () => {
          this.isLoading = false;
        },
      });
  }

#transaction.component.html code rendering app-deal-partners code

  <div style="padding-bottom: 20px;">
    <app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>
  </div>

#app-deal-partners HTML code

 <app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data" (tableActionsEvent)="tableActions($event);" (editRowEvent)="editDeal($event)"></app-table-multi-sort>
angulartypescript

Answer №1

To achieve this functionality, you can utilize observables:

private userRemoved: Subject<any> = new Subject<any>();
public userRemoved$ = this.userRemoved.asObservable();
remove(rowData: any) {
  this.loading = true;
  this.Service.remove(rowData.id)
    .pipe( tap(_ => this.userRemoved.next(rowData)), finalize(() => { this.loading = false;}))
    .subscribe({
      next: (res) => {
      },
      error: (err) => {
        this.notificationService.showError('An error occurred, please try again later.');
        this.loading = false;
      },
      complete: () => {
        this.loading = false;
      },
    });
}

Template:

<app-deal-partners [userRemoved$]="userRemoved$" [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

and the child component logic:

@Input()
public userRemoved$: Observable<any>;

OnInit(){
  this.userRemoved$.subscribe(_ => {
    // Implement your logic here
  })
}

Answer №2

If I had to choose, this is how I would implement it:

<app-deal-partners 
  *ngIf="!isLoading"
  [transaction]="transaction"
  [forApprovalResponse]="forApprovalResponse"
></app-deal-partners>

When the value of isLoading is true, the component gets destroyed, but when it's false, the component is reloaded.

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

What is the proper way to utilize queries in BlitzJS?

I am attempting to extract data from a table by filtering based on the relationship with the Blitzjs framework. However, I am facing difficulties using queries as it seems to be the only option available. Every time I try to call the quer ...

typescriptnext.jsblitz.js

What could be the reason for Angular showing the raw HTML code instead of

I'm currently diving into Angular and encountering an issue where my HTML isn't properly displaying the values I've set. It appears to only show the raw HTML. Here's a snippet from my HTML page: <p>to-do-items works!</p> < ...

javascriptangular

Ensure proper GET request is made

I can't seem to figure out the correct way to make a GET request in Angular to fetch a String from a Java API, or maybe I'm not calling the get function properly within the .subscribe() method. Here's my service.ts with the issue in the busc ...

angularapihttp

Uploading Files with Typescript Promises

Hello everyone, I'm facing an issue where a dialog window is opening before all the files are uploaded to the server. Can anyone please guide me on what might be going wrong in my code? public UploadAll() { this.doAsyncTask().then(() => ...

typescript

Issue with redirecting to another link in Angular routing

After numerous attempts, I finally managed to configure the adviceRouterModule correctly. Despite extensive research and Google searches, I couldn't quite crack it. Here is the configuration for my AdviceRoutingModule: const adviceRouters: Routes = ...

javascriptangulartypescriptangular-ui-router

Tips for creating a typescript typeguard function for function types

export const isFunction = (obj: unknown): obj is Function => obj instanceof Function; export const isString = (obj: unknown): obj is string => Object.prototype.toString.call(obj) === "[object String]"; I need to create an isFunction method ...

javascripttypescriptfunctiontype-safetynarrowing

The collaboration between Redux's combineReducers and the power of TypeScript

I'm facing a challenge with using react-intl-redux and redux-form in my react app, specifically when working with combineReducers. Despite trying multiple approaches, I haven't been able to resolve the issue. react-intl-redux import { combineRe ...

reactjstypescriptreduxredux-formreact-intl

Compelling users to provide feedback on an App with the Ionic Framework

As a novice developer, I could use some assistance with implementing ratings in my app. My goal is to show menu items based on whether a user has given my app a 5-star rating. For instance, if a user gives a 5-star rating, I would assign the class "review ...

angulartypescriptcordovaionic-framework

Failing unit test for ngrx effect with { dispatch: false } setting and action returned by the effect

Take a look at this code snippet: loadProducts$ = createEffect(() => this.actions$.pipe( ofType(requestLoadProducts), switchMap(action => this.service.load().pipe( map(data => loadProducts({products: data})) )) ) , { dispatch ...

angularunit-testingngrxeffect

Developing multi-layered business solutions with Angular front-end that incorporate customized localization in .Net Core Entity MVC is essential for ensuring effective business logic implementation

Help me enhance and refine this code I faced challenges trying to understand and piece together this code (coding isn't my strong suit). Sharing knowledge is important, as encouraged by platforms like StackOverflow. Please help me improve and correct ...

angularasp.net-mvcasp.net-corelocalizationangular-http-interceptors

Tips for Implementing Error Handling in Angular using Sweetalert2

On this code snippet, I have implemented a delete confirmation popup and now I am looking to incorporate error handling in case the data is not deleted successfully. confirmPopUp(){ Swal.fire({ title: 'Are You Sure?', text: 'Deleti ...

javascriptangularangularjstypescript

Installing and running Node.js within a tomcat server

After creating a web application using Angular, Node/Express, and MySQL, I faced an issue with deployment. My Angular app is running on a tomcat server connected to multiple PCs, but now I need to also deploy my backend (Node.js/Express.js) on the same s ...

node.jsangularexpressangular-fullstack

The Alert dialog in Shadcn will automatically close upon clicking the trigger from the dropdown menu

It seems like other people have encountered this issue, but they all used the alert dialog in the same file. I attempted to open the alert dialog using "" and included a dropdownmenuitem with 'delete' inside it. However, when trying to open the ...

typescriptnext.jsdrop-down-menuandroid-alertdialog

Error 404 when implementing routing in Angular 2 with Auth0

In my Angular 2 application, I am utilizing Auth0 authentication. While everything works fine on localhost, I encounter issues when running the application on the server (my domain). Based on what I know, my problem seems to be with the routes. Iss ...

angularauthenticationtypescriptauth0

AWS Lambda serverless deployment of Angular Universal is failing to detect javascript files in the dist/browser directory

After following the steps in this tutorial for deploying to a lambda function, I encountered some issues. When testing it using serverless offline, I kept getting 404 errors for each compiled JS file. However, once I deployed it, the errors changed to 403. ...

angularamazon-web-servicesexpressaws-lambdaserverless

Trigger a function upon a user's departure from a page or route in Angular 2

Is there a way to trigger a function only when the current route changes away from a specific component, such as when navigating away from "..../user/user-details"? I want this method to execute regardless of whether the route is changed through user inter ...

angular

Ensuring type compatibility in a declarative manner: What are the methods?

My goal is to establish a compile-time constraint that ensures a variable of type T2 can be assigned to a variable of type T1. If I have a value (t2) of type T2, I can simply do the following: const t1: T1 = t2; Is there an alternative method to achiev ...

typescript

Tips for creating objects with optional properties

I need help figuring out the best way to handle situations where a variable can either be defined or empty. Currently, I'm using Partial, but it doesn't provide the accurate outcome. The specific scenario involves MobX observables that begin as ...

reactjstypescriptmobx

Executing asynchronous methods in a Playwright implementation: A guide on constructor assignment

My current implementation uses a Page Object Model to handle browser specification. However, I encountered an issue where assigning a new context from the browser and then assigning it to the page does not work as expected due to the asynchronous nature of ...

javascripttypescriptasync-awaitconstructorplaywright

Error in Angular: Unexpected '<' token

After setting up my angular and express app using the angular-cli and express command lines, I successfully built the angular app with the ng build command. However, when attempting to serve it with the express server, I encountered the following error in ...

javascriptnode.jsangularexpress