Call a method on app.component.ts from another component on click method - angular 6

Question

I am trying to call a method which is in app.component.ts from a another component on some click event

app.component.ts having a method

getData(data){
  console.log(data)
}

Another component: on click event trying to call getdata()

sendData(data){
  getData(data) // need to pass some data to that component
}

Tried: Added app.component in the other component and able to call the method but gettting a circular dependency error.

Possible duplicate of [Angular 2 pass data between two components](https://stackoverflow.com/questions/46208881/angular-2-pass-data-between-two-components) — Maihan Nijat, Nov 25 '19 at 15:17
@AdritaSharma No it is a different one. I am doing some operation there and want to call a method which is in app.component.ts — surendra, Nov 27 '19 at 18:19
@MaihanNijat : No i dont want to do any data sharing . Just want to call a method which is in app.component.ts from the other — surendra, Nov 27 '19 at 18:25

score 1 · Answer 1 · answered Nov 25 '19 at 13:46

1

you can use @Inject in your constructor to use the app.component functions as follow:

constructor(@Inject(forwardRef(() => AppComponent)) private app_component:AppComponent) { 
}

sendData(data){
  this.app_component.getData(data) // need to pass some data to that component
}

import Inject and forwardRef from @angular/core

Good Luck!!!

answered Nov 25 '19 at 13:46

Avi

1,111
1
11
13

setting aside the fact that you just introduced a dependency between components. the major caveat here is that doing this makes `AppComponent` non tree shakable. it will forever be part of your bundle. used, or not. – Stavm Jul 30 '21 at 18:44

score 1 · Answer 2 · answered Nov 25 '19 at 13:49

If you need access to a function from several places, so you need to add that function in service as DI service as @ mentioned.

@Injectable()
export class <servicename>{

console(){}
getData(data){
  console.log(data)
}
}

Next, make sure the service is listed in the providers array of your main module:

@NgModule({ 
  imports:      [ BrowserModule],
  declarations: [ AppComponent, BuyTestComponent ],
  providers:    [ <servicename> ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

now you can access service function anywhere in-app

@Component(...)
export class componentname {

    //inject service into the component
    constructor(private service:servicename){}

    click() {
        //access service function
        this.service.getData();
    }
}

score 0 · Answer 3 · answered Nov 25 '19 at 13:46

You can create a service and make the getData function there which is then can be injected in any component like app.compnent and any other components. Call the service method from there so this way you can use

getData(data){
  console.log(data)
}

from any component

It seems that you load the data from the server when app is loaded so you have written it in the app.component.ts

Move it into a service and add the service into the modules.ts file and inject it in required components and use the getData function

score 0 · Answer 4 · answered Nov 25 '19 at 13:50

Create a Base class

If the actions are independent, and you just want to share code:

Example:

export class DataBaseClass {
   getData();
}

Extend both classes with the same DataBaseClass

export class AppComponent extends DataBaseClass {

// It will get from the base implementation the code.

}

Create a shared service

The service will be singleton and can be injected in multiple components and share data

Implement cross component communication

Use this solution for parent-child situations.

Call a method on app.component.ts from another component on click method - angular 6

4 Answers4