How to call a method from one component to another in angular

Question

I have a component that looks like this:

export class JobStatusComponent extends BaseTableView implements OnInit, OnDestroy {
 
 public getJobstatusdata(host) {
    this.apiService.getjobstatusdata(host).subscribe((data: any) => {
      this.jobList = data.JobList.ScheduleJobList.ScheduleJob;
      this.jobList.forEach((val) => {
        val.JobType = val.XMLQuery.Query.JobType;
        const { Password, FingerPrint, ...newObject } = val.XMLQuery.Query;
        val.QueryString = JSON.stringify(newObject)
      })

      this.setTableData(this.jobList);
      this.isDataLoaded = true;
    });
  }

}

I want to call this method in another component when the tab is clicked. The below function is called in the parent component of the tab and that is where I want the function call to happen:

 updateactiveTab(activeTab: string) {
    console.log('activetab', activeTab)
    this.activetab = activeTab;
    if(this.activetab === 'Job Status') {
      console.log('I am in Job Status tab');
     //Call the method here
    }

  }

I tried to import the component and use its function as shown below, but it gives error:

import { JobStatusComponent } from '../job-status/job-status.component';

export class TraceLogpageComponent implements OnInit {

  activetab;
   
  tabfocusarr = ['Service Logs', 'System Logs', 'Job Status']
  tabfocus = 0;
  constructor(private modal: ModalService) {

  }

  ngOnInit() {
    let jobStatusComp =  JobStatusComponent;
    jobStatusComp.getJobstatusdata()
  }

  updateactiveTab(activeTab: string) {
    console.log('activetab', activeTab)
    this.activetab = activeTab;
    if(this.activetab === 'Job Status') {
      console.log('I am Job Status');
     //Call the method here
    }

  }

I get this error:

Property 'getJobstatusdata' does not exist on type 'typeof JobStatusComponent'.

Answer 1

You can use angular service to implement getJobstatusdata() method. Then pass the instance of the new service in constructor of TraceLogpageComponent or JobStatusComponent as you like. You should be able to fetch setTableData without actually calling the api again and again or pass boolean parameter to getJobstatusdata() when you need to refresh table data.

Answer 2

The call of the component's method from the other one is a smell. Usually, that means with slight changes in design @Input and @Output would be suitable. For example getJobstatusdata(host) method might be changed so that host would be an @Input and the getJobstatusdata would be call whenever property @Input() host is changed.

Anyway, if JobStatusComponent is child of the TraceLogpageComponent you might leverage @ViewChild directive. Otherwise, I would really suggest reviewing the design. Using a shared service with the observable or move getJobstatusdata into service.