How to call a function from other component in angular

Question

report.ts

getReports() {
    this.loading.today = true;
    this.loading.daily = true;

    const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
    const reportModules = [
      { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
      {
        url: 'application-and-severity',
        params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
      },
      {
        url: 'application-and-severity-and-date',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      },
      {
        url: 'application-and-status',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      }
    ];
}

How to call the function getReports on my report-list.ts?

What I want is to call the function getReports to the report-list.ts.

for example on my report-list.ts I have a function which is the

saveData() { ... } inside the saveData what I want is to call the function getReports from the report.ts

You have to create service and use that function multiple components after injecting that service — Santosh Shinde, May 19 '20 at 05:13

score 1 · Answer 1 · answered May 19 '20 at 05:22

1

Calling component function is not a good approach

Instead create a service and add this function getReports to that service and use this service in all the components you want to call this function in

answered May 19 '20 at 05:22

Shlok Nangia

2,355
3
16
24

Santosh Shinde · Answer 2 · 2020-05-19T06:13:48.233

Communicate between sibling components

Shared Application Model: Siblings can communicate through a shared application model (just like angular 1). For example, when one sibling makes a change to a model, the other sibling that has bindings to the same model is automatically updated.

Component Events: Child components can emit an event to the parent component using @Output() bindings. The parent component can handle the event, and manipulate the application model or its own view model. Changes to the Application Model are automatically propagated to all components that directly or indirectly bind to the same model.

Service Events: Components can subscribe to service events. For example, two sibling components can subscribe to the same service event and respond by modifying their respective models. More on this below.

For more help check this link.

please check the following example.

    @Injectable()
    export class CustomService {
        getReport = () => {}
    }

    // here you can use service
    export class ListReportComponent {
      constructor(private custom CustomService){}

       ngOnInit() {
        // this will emit the event and call the getReport
        this.custom.getReport();
       }
   }

And another approach to using the event emitter but It depends on the relation between your components (parent/child) but the best / generic way to make communicate components is to use a shared service.

        import { Component, EventEmitter, Input, Output } from '@angular/core';

        List Component

        getReport = () => {
            // your code
        }
        <list-report [getReport]="getReport">Disagree</list-report>

        ListReportComponent

        export class ListReportComponent {
            @Output() getReport = new EventEmitter<>();

            ngOnInit() {
                // this will emit the event and call the getReport
                this.getReport.emit();
            }
        }

Hope this will help you.

score 0 · Answer 3 · answered May 19 '20 at 06:00

A service should be used or some helper functions depends on the use case but still if we really want to access the method of a child component in Parent Component in Angular can be done as below:

import { Component } from "@angular/core";

@Component({
  selector: "report",
  template: '<div>hi this is template</div>',
  styles:[]
})
export class ReportComponent {
  getReport() {
    console.log('hi get report')
  }
}

import { Component, ViewChild } from "@angular/core";
import { ReportComponent } from "./report.component";

@Component({
  selector: "report-list",
  template: `<div>
      <h4 (click)="callGetReport()">This is report List</h4>
      <report></report>  
  </div>`,
  styles: []
})
export class ReportListComponent {
  @ViewChild(ReportComponent) public report: ReportComponent;

  callGetReport() {
    this.report.getReport();
  }
}

score 0 · Answer 4 · answered May 19 '20 at 06:00

There is no official way to call or access function/data from another component. So we should avoid it.
The two components can be interacted each other by using the Input, Output attributes only. By Passing the input parameter as a child component by using the input attribute you can perform some operation on child component.

A solution would be to create a service and there use event emitter. You could move the getReports() function to a service and inject it into the component that need this function.

How to call a function from other component in angular

4 Answers4