How to call function from another component in angular?

Question

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>

Andres2142 · Accepted Answer · 2021-09-09 21:18:18Z

2

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();
  }

edited Sep 9, 2021 at 21:18

answered Sep 9, 2021 at 21:12

Andres2142

3,0122 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vugar Abdullayev · Accepted Answer · 2021-09-09 17:31:45Z

0

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

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

answered Sep 9, 2021 at 17:31

Vugar Abdullayev

2,1513 gold badges24 silver badges50 bronze badges

6 Comments

Agastya Kumar Over a year ago

what service is this 'someService' ? can you explain

Vugar Abdullayev Over a year ago

it is some custom service. App to you, such as deal-shared.service.ts

Agastya Kumar Over a year ago

is that an input or output event emitter ? where do I put that function ? in deals approval ?

Vugar Abdullayev Over a year ago

it is service, you inject it on components where you call editDeal method.

Vugar Abdullayev Over a year ago

it is just service. See Unrelated Components: Sharing Data with a Service section in medium.com/@nodexperts_88267/…

|

Collectives™ on Stack Overflow

How to call function from another component in angular?

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related