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

Question

I am new to Typescript and Angular 2. I tried to find the answer on the Internet, but it seems that they do not work for me.

Let's say I have 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 another 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 it? Please, help

Answer 1

If you need access to a function from several places, consider placing it in the service mentioned by @tibbus.

utility.service.ts

 @Injectable() export class UtilityService{ TestingFunction(){} } 

Then 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 { } 

Then you can enter this 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

Angular2 has 2 ways to communicate between 2 components:

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

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

Answer 3

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

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

Assuming both files are saved in the same folder.

Create it in your constructor as shown below

 constructor(public myapp: AppComponent){} 

then call your BuyTestComponent as shown below

 this.myapp.testingFunction(); 

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

 providers: [ AppComponent, ] 

Answer 4

In most cases, BeetleJuice's answer is the right decision: to use the functionality of several components in services .

However, sometimes you have uniquely connected components that you want to include in the HTML template of the parent component.

In this case, the use of the service will be overhead. Fortunately, you can use template reference variables (#var)

Let's say you have a popup component:

 // import... @Component({ selector: 'my-popup', template: '<div *ngIf="visible"><ng-content></ng-content></div>' }) export class MyPopupComponent { public visible: boolean = false; public toggle() { this.visible = !this.visible; } } 

And a switching component that can trigger a popup component:

 // import... @Component({ selector: 'my-popup-toggle', template: '<button (click)="popup?.toggle()"><ng-content></ng-content></button>' }) export class MyPopupToggleComponent { @Input('for') popup: MyPopupComponent; } 

Then it is so easy to connect components through HTML:

 <div> <my-popup #popup1>Good popup</my-popup> <my-popup #popup2>Better popup</my-popup> <my-popup #popup3>Best popup</my-popup> </div> <div> <my-popup-toggle [for]="popup1">Toggle the good</my-popup-toggle> <my-popup-toggle [for]="popup2">Toggle the better</my-popup-toggle> <my-popup-toggle [for]="popup3">Toggle the best</my-popup-toggle> <my-popup-toggle [for]="popup3">Toggle the best with another button</my-popup-toggle> </div> 

In very simple situations, you can do something like this:

 <div> <my-popup #popup4>Best popup II</my-popup> </div> <div> <button (click)="popup4.show()">Toggle the best II</button> </div> 

If necessary, you can also access the template reference variable from the parent component:

 // import... @Component({ selector: 'my-parent-comonent', template: ' ...<my-popup #popup5>Best popup III</my-popup>... ...<my-popup #popup6>Best popup IV</my-popup>... ' }) export class MyParentComponent { @ViewChild('popup5') popup5: MyPopupComponent; @ViewChild('popup5') popup5: MyPopupComponent; showPopup5() { this.popup5.show(); } showPopup6() { this.popup6.show(); } } 

Answer 5

I think the easiest way to achieve this is to create a static property in the application component that populates when onInit is turned on.

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 6

You can use events such as:

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