How to access a method from app.component from other component?

Question

I am new to Typescript and Angular 2. I tried to look for an answer in the web but it seems they don't work for me.

Say I have an app.component as shown below:

export class AppComponent implements OnInit {

    constructor(public _testService: TestService) { }

    listForCart = this._testService.getListForCart();
    cartCount = this.listForCart.length;
    cartPayableAmount = 0;

    ngOnInit() {
        this.computeTotal();
    }

    TestingFunction(){
        console.log("Got here");
    }
}

---

Now I want to access the TestingFunction in my app.component in other class as shown below:

export class BuyTestComponent {

    constructor(private _testService: TestService) {
    }

    public pageTitle: string = "ALL PRACTICE TEST SERIES";

    TestHere() {
        // should call TestingFunction() here.....
    }
}

How to do that? Please help

Answer 1

If you need access to a function from several places, consider putting it in a service as @tibbus mentioned.

utility.service.ts

@Injectable()
export class UtilityService{

    TestingFunction(){}
}

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

app.module.ts

// https://angular.io/docs/ts/latest/guide/ngmodule.html#!#ngmodule-properties
@NgModule({ 
  imports:      [ BrowserModule],
  declarations: [ AppComponent, BuyTestComponent ],
  providers:    [ UtilityService ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

You can then inject that service in any component that needs access to the function

buy-test.component.ts

@Component(...)
export class BuyTestComponent {

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

    TestHere() {
        //access service function
        this.util.TestingFunction();
    }
}

Answer 2

Assuming your class AppCompenent is saved as app.component.ts Then in your BuyTestComponent class, you need to first import it AppComponent like below

import {AppComponent} from '../app.component';

Assuming both files are saved in the same folder.

Instantiate it in your constructor like below

constructor(public myapp: AppComponent){}

then call it in your BuyTestComponent like below

this.myapp.testingFunction();

lastly, you need to register it as a provider in your app.module.ts

providers: [
 AppComponent,
]

Answer 3

Angular2 has 2 ways to communicate between 2 components :

1. Via @Input / @Output if the components have Parent-Child relationship
2. Via a Service

Both ways are detailed in this article from Angular2 docs : https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 4

I think the simplest way to achieve this is, basically create a static property in the app component that is populated when onInit

In app.component

export class AppComponent implements OnInit {
  static myapp;

 ngOnInit() {
    AppComponent.myapp = this;
 }
}

then in your component

import { AppComponent } from '../../app.component';
export class UsersComponent  implements OnInit {

 ngOnInit() {
    console.log(AppComponent.myapp);
 }
}

Answer 5

You can use Events like:

app.component.ts

import { Events } from 'ionic-angular';
  constructor(public events: Events) {
    events.subscribe('myEvent', () => {
      this.myMethod();
    });
  }

  myMethod() {
    console.log("my method was activated");
  }

anotherclass

import { Events } from 'ionic-angular';
constructor(public events: Events) {
}

callEvent() {
  this.events.publish('myEvent');
}