I'm trying to make two angular ponents and I want to call a function from the first ponent in the second ponent. When I try this I get following error message: Cannot red property 'functionName' of undefined. How can this be solved?

Here a link of an example:

I'm trying to make two angular ponents and I want to call a function from the first ponent in the second ponent. When I try this I get following error message: Cannot red property 'functionName' of undefined. How can this be solved?

Here a link of an example: https://stackblitz./edit/angular-rre4gb

• javascript
• angular
• typescript

Share Improve this question Follow asked Aug 14, 2017 at 10:37 LeonzenLeonzen 1,27555 gold badges1414 silver badges3131 bronze badges 1

• for a quick start, check my updated answer. – Hamid Asghari Commented Aug 14, 2017 at 10:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

That's because the ponent you want to call its function, is not instantiated.

for ponent munication you can use a service instead:

Service

@Injectable()
export class MyService {
    myCustomFunction(){
    }
}

Component

in your ponent:

@Component({
   selector: 'my-ponent',
   providers: [ MyService ]
})
export class MyComponent {

   // inject your service to make it available
   constructor(private service: MyService){}

   doStuff(){

      // call function which is located in your service
      this.service.myCustomFunction();
   }
}

As others have stated, I would prefer a shared service with a Subject among these ponents.

service:

@Injectable()
export class SharedService  {

  mySubject = new Subject();

}

WorldComponent (subscriber):

export class WorldComponent  {
  constructor(private sharedService: SharedService){
    this.sharedService.mySubject.subscribe((data)=>{
      this.worldFunction();
    })
  }

HelloComponent(publisher):

public helloFunction() {
    alert('Hello');
    this.sharedService.mySubject.next(true);
  }

You can find the updated example here: https://stackblitz./edit/angular-rnvmkq?file=app%2Fworld.ponent.ts

The best way to share information between multiple ponents is generally through a service.

Create a separate file: file.service.ts

Provide the service in the app.module.ts file

Inject the service into each ponent. Then you'll have access to the variables in both ponents

See this: https://angular.io/tutorial/toh-pt4

the reason of the error is that the hello ponent is not imported, but instead of calling a ponent from another, you should use a service in between, as other answers already suggested.