calling function from child to child component

Question

Parent component which is transactions-details.component renders app-deals-transaction , app-deals-transaction component renders 2 child component which are app-deals-approval component and app-table-multi-sort component.

How to know that if there are changes on deals-transaction.component it will notify or also call a function on deals-approval.component.ts ?

So if _pageEventDealsList in deals-transaction.component is called it will also call _pageEventDealsForApprovalList on approval.component.ts component but the problem is _pageEventDealsForApprovalList is on separate component.

cause everytime _pageEventDealsList is update it will also need to update _pageEventDealsForApprovalList which is on seperate component.

Thank for any help , advices , answers.

##transactions-details.component code

<div class="tab-content">
    <app-deals-transaction *ngIf="tab === 'Deals'" [transaction]="transaction"
        ></app-deals-transaction>
</div>

##app-deals-transaction component code - renders app-table-multi-sort and app-deals-approval

 <div >
   <app-deals-approval  [transaction]="transaction" [dataTest]="totalDeals"></app-deals-approval> 
  </div>
  <app-table-multi-sort (dataServiceEvent)="dealsServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data" (tableActionsEvent)="tableActions($event)"></app-table-multi-sort>

#app-deals-transaction ts code

export class DealsTransactionComponent implements OnInit {
  @Input() transactionId: any = 2;
  @Input() transactionName: string = '-';
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  resetFormSubject: Subject<boolean> = new Subject<boolean>();
  tableOptions: any;
  @Input() transaction: any;
  totalDeals: number;

  isLoading: boolean;
  accountId: any;
  data: any;
  searchInput: string;
  table: any;
  constructor(
    private _snackBar: MatSnackBar,
    private dialog: MatDialog,
    private dealService: DealService,
    private notificationService: NotificationService,
    private route: Router,
    
  ) {}
  ngOnInit(): void {
    const currentAccountDetails = localStorage.getItem('currAcct') as any;
    if (currentAccountDetails) {
      this.accountId = JSON.parse(currentAccountDetails).accountId;
    }

    this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
        {id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
        {id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
        {id:'maxTerm',name:'Max Available Term'},
        {id:'cash',name:'Cash Contribution'},
        {id:'action', name: 'Actions', actions:[
          {icon:'file_copy', name:'Copy', class:'primary-color' , },
          {icon:'delete', name: 'Delete', class:'mat-error'},
          {icon:'forward', name: 'For Approval', class:'primary-color' }
        ]}
      ]
    }
  }

  dealsServiceEvent(item) {
    this.table = item;
    if (this.table) {
      this._pageEventDealsList();
    }
  }
  public _pageEventDealsList() {
    this.searchInput = '';
    this.isLoading = true;
    this.dealService
      .getAllDeals(
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe({
        error: (err) => this.notificationService.showError(err),
        next: (res) => {
          this.table.totalItemCount = res.totalItemCount;
          this.table.lastItemOnPage = res.lastItemOnPage;
          this.totalDeals = res.items.length;
          this.table.data = res.items;
        },
        complete: noop,
      });
  }

##deals-approval.component ts code

export class DealsApprovalComponent implements OnInit {
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  tableOptions: any;
  @Input() transaction: any;
  @Input() dataTest: any;
  isLoading: boolean;
  private _destroyed$ = new Subject();
  totalDeals : number;
  accountId: any;
  data: any;
  searchInput: string;
  table: any;
  constructor(
    private dialog: MatDialog,
    private dealService: DealService,
    private notificationService: NotificationService,
    private route: Router,
    
  ) {}
  ngOnInit(): void {
    console.log("load here" , this.dataTest)
  
    const currentAccountDetails = localStorage.getItem('currAcct') as any;
    if (currentAccountDetails) {
      this.accountId = JSON.parse(currentAccountDetails).accountId;
    }

    this.tableOptions = {
      columns:[
        {id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
        {id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
        {id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
        {id:'maxTerm',name:'Max Available Term'},
        {id:'cash',name:'Cash Contribution'},
      ]
    }
  }

  dataForApprovalServiceEvent(item) {
    this.table = item;
    if(this.table) {
      this._pageEventDealsForApprovalList();
    }
  }

  private _pageEventDealsForApprovalList() {
    this.searchInput = '';
    this.isLoading = true;
    this.dealService
      .getAllForApprovalDeals(
        this.accountId,
        this.transaction.id,
        this.table.pageIndex + 1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe({
        error: (err) => this.notificationService.showError(err),
        next: (res) => {
          this.table.data = res.items;
          console.log("this.table.forApprovalData" , res.items)
        },
        complete: noop,
      });
  }
}

Answer 1

The solution would be to create an Observable in service and then send an event and subscribe to it in other components.

Ex - in your.service.ts

someNameEvent = new BehaviorSubject<Object>("");
someNameEvent$ = this.someNameEvent.asObservable();

import your.sevice.ts in both components

in sending component -

this.your_imported_service_name.someNameEvent.next({
    sendData: 'any data you want to send',
    operation: 'transaction/update' // event id 
})

in receiving component in the constructor

your_imported_service_name.someNameEvent$.subscribe((data) => {
     if (data) {
         switch (data['operation']) {
              case 'transaction/update':
                  //make functions calls
                  break;
              //more events
        }
     }, (error) => {
        //error callback
     });

Hope it solves your problem.