How do we refresh or reload a child component in angular?-CodePudding

I have transaction.component.html which renders the app-deal-partners component , evertime the delete function is called I wanted to refresh and reload the child component which is app-deal-partners component.

I want to reload <app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

How do we address this in angular ? Thanks.

#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 renders app-deal-partners code

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

#app-deal-partners code html

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

CodePudding user response：

You can achieve that with observables:

private userDeleted: Subject<any> = new Subject<any>();
public userDeleted$ = this.userDeleted.asObservable();
delete(rowData: any) {
  this.isLoading = true;
  this.Service.delete(rowData.id)
    .pipe( tap(_ => this.userDeleted.next(rowData)), 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;
      },
    });
}

Template:

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

and the child component logic:

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

OnInit(){
  this.userDeleted$.subscribe(_ => {
    // Logic goes there
  })
}