How to call function of component B from component A

Question

I think this may be a duplicate question.

I have a component B in which there is a function saveContact(). I want to call this function from another function of component A .

So I

Imported component B in component A. Then created a viewChild
@ViewChild(ContactformComponent) contactForm: ContactformComponent;
Called the function

saveContactForm() { this.contactForm.saveContact(); }

When I run the application I get error TypeError: Cannot read property 'saveContact' of undefined. Can someone tell me what I am doing wrong.

Parent Component

import { ContactformComponent } from './forms/contactform/contactform.component';

@Component({
selector: 'app-insert',
templateUrl: './insert.component.html',
styleUrls: ['./insert.component.scss'],
animations: [routerTransition()]
})
export class InsertComponent implements OnInit {
@ViewChild(ContactformComponent) contactForm;

saveContactForm() {
this.contactForm.saveContact();
}
}

Child Component

@Component({
selector: 'app-contactform',
templateUrl: './contactform.component.html',
styleUrls: ['./contactform.component.scss']
})
export class ContactformComponent implements OnInit {
contactForm: FormGroup;

... // Form Code

  public saveContact() {
  const savedContact = {
  contactType: this.contactType,
  contactDescription: this.contactTypeDescription,
  contactSubType: this.contactSubType,
  contactSubTypeDescription: this.contactSubTypeDescription,
  referenceNumber: this.referenceNumber,
  lastVerifiedDate: this.parseDate(this.contactlastVerifiedDate.toString()),
  startDate: this.parseDate(this.contactStartDate.toString()),
  endDate: this.parseDate(this.contactEndDate.toString())
  };
  this.savedContact.emit(savedContact);
  this.snackbar.open('Contact Saved,Click on Create Customer or Fill more 
  Details', 'Close', {
  duration: 5000
  });
  }

The correct syntax is to use `@ViewChild('template-variable') contactForm: ContactformComponent;` where you need to use `template-variable` in your component HTML like this — Niladri, May 13 '19 at 18:04
It will be better if you use services, because you create a service and that you can use everywhere. — TheCoderGuy, May 13 '19 at 18:04
Using a service is also better if you want to call the function in multiple component, create a singleton instance and inject it in component. — Niladri, May 13 '19 at 18:07
@Niladri Currently I am doing it the way it is mentioned in the approved answer https://stackoverflow.com/questions/45303683/angular-4-execute-function-from-another-component — Cpt Kitkat, May 13 '19 at 18:12
@TheHeadRush There is no logical code except the one I have written in question.If you want me to paste the form code I will do that too .. but it doesn't help anyone — Cpt Kitkat, May 13 '19 at 18:19
Ultimately, `this.contactForm` is undefined. Could be several reasons for that. 1) Is it actually in the template? 2) Are you sure you're importing the right `ContactformComponent`? — Adam Jenkins, May 13 '19 at 18:50
@ahmed - turn your component into a service. You're getting undefined because your component isn't initialized anywhere. To initialize it you would need to define it in the template somewhere. BUT please use a service like you suggest in the answer you are trying to copy. — Nanotron, May 13 '19 at 19:10

AliWieckowicz · Answer 1 · 2019-05-13T18:20:45.680

0

Is the method public in the child component:

public saveContact() {
    //saveContact
 }

in the parent class...

export class A {
@ViewChild(ContactformComponent) contactForm: ContactformComponent;

edited May 13 '19 at 18:20

answered May 13 '19 at 18:11

AliWieckowicz

549
1
4
17

Yes I tried making the method public but still same issue – Cpt Kitkat May 13 '19 at 18:31
do you have the child component declared in the app.module ? – AliWieckowicz May 13 '19 at 18:45
Yes I have declared – Cpt Kitkat May 13 '19 at 18:45
1

What does your parent component template look like? – AliWieckowicz May 13 '19 at 18:47
what about insert.component.html – AliWieckowicz May 13 '19 at 19:27

Naga Sai A · Answer 2 · 2019-05-13T19:50:54.637

To resolve this issue, include child component in parent component.html

Import ViewChild in your parent.component.ts

import { Component, ViewChild } from "@angular/core";
Import Child Component in parent.component.ts and include child component in parent.component.html

parent.component.ts

import { Component, ViewChild } from "@angular/core"; import { ChildComponent } from "./child.component";

@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { @ViewChild(ChildComponent) contactForm; saveContactForm() { console.log(this); setTimeout(() => this.contactForm.saveContact(), 0); } }

parent.component.html

<child></child>
<button (click)="saveContactForm()">Save</button>

On removing above mentioned child component from parent.component.html , it will throw below error in developer tools

sandbox.517cc37e.js:1 ERROR TypeError: Cannot read property 'saveContact' of undefined

working example - https://codesandbox.io/s/rlq4xj5q0n

How to call function of component B from component A

2 Answers2