CODEWITHSUNDEEP
angulartypescript
Agastya Kumar
Agastya Kumar

Reputation: 3

How to call function from another component in angular?

Deal transaction component renders the deals-approval.component, Deal transaction component has the editDeal function ,

How do I call that and use (editRowEvent)="editDeal($event)" on deals-approval.component.html without duplicating the code which is editDeal ?

Thanks.

#deal transaction component

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

#deal transction ts code

editDeal(deal:any){
    let dealType = '';

    switch(deal.dealType){
      case 'PM Restructure':
        dealType = this.DEAL_TYPES.PMR
        break;
      default:
        break;
    }

    const state = { 
      data: {
        transaction: this.transaction,
        dealId: deal.id,
        dealType: dealType,
        dealName: deal.name,
        breadCrumbsPath:[
          {
            text: 'My transactions',
            link: '/transactions',
          },
          {
            text: this.transaction.name,
            link: `/transactions/overview/${this.transaction.id}`,
          },
        ]
      },      
    }
    this.gotoDealDetails(state);    
  }

#deals-approval.component.html - I wand this (editRowEvent)="editDeal($event)" on deals-approval but the function is on Deal transaction component, how to call that from here?

<div style="padding-bottom: 20px;" [ngClass]="{'hide':!hasApproval}">
    <app-table-multi-sort 
      (editRowEvent)="editDeal($event)" 
      (dataServiceEvent)="dataForApprovalServiceEvent($event)" 
      [tableOptions]="tableOptions"
      [tableData]="data">
    </app-table-multi-sort>
</div>

Upvotes: 0

Views: 3670

Answers (2)

Andres2142
Andres2142

Reputation: 2917

Create a service for passing around your $event data to your DealTransactionComponent.

@Injectable({ providedIn: 'root' })
export class AService {
   dataSubject: Subject<any> = new Subject<any>();
}

In your DealsApprovalComponent, inject this service

  constructor(private myService: AService) {}
  
  editDeal($event): void {
    if ($event) {
      this.myService.dataSubject.next($event); // emitting your value
    }
  }

DealTransactionComponent

  // you need a subscription for avoiding memory leaks
  // for that, use ngOnDestroy 
  subscription!: Subscription; 

  constructor(private myService: AService) {}

  ngOnInit(): void {
    this.subscription = this.myService.dataSubject.subscribe((data: any) => {
     this.editDeal(data);
    });
  }
 
  editDeal(deal:any) { .... }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }

Upvotes: 2

Vugar Abdullayev
Vugar Abdullayev

Reputation: 2105

Add that method to service. Then call it from components Like

public editDeal($event): void {
 this.someService.editDeal($event);
}

Upvotes: 0

Related Questions