Angular trigger function from outside component

Question

I have a component that only contains a form and a function to submit the form.

submitData(newUserForm: NgForm)

How can I trigger this function from another component, when I click a button?

I embed the form component like this:

<app-form></app-form>

But it's not created in the main component and I cannot import it, like a child component.

I have a service in the main component but the form component doesn't have access to it.

I have found this but nothing seem to work for me.

How to call another components function in angular2

In the main component I need a function that should call the submit function from the form:

Something like:

save() {
   submitData();
}

Does it work with something like Hostlistener, dispatchEvent or runOutsideAngular?

I have found some samples but nothing seem to work.

What is the relation between the two components? Is the form used in the other component? Are they used together within another component? Are they used in completely different parts of the app? — rveerd, May 03 '21 at 14:57
Does this answer your question? [Angular2 - call a function from another standalone component. Basically, call function from outside component](https://stackoverflow.com/questions/67369158/angular2-call-a-function-from-another-standalone-component-basically-call-fu) — rveerd, May 03 '21 at 15:04

score 1 · Answer 1 · answered May 03 '21 at 14:52

1

This is about the component interaction. Just try with @ViewChild decorator, or you can interact them using service.

answered May 03 '21 at 14:52

Liu Zhang

1,808
19
31

`@ViewChild` does not works with multiple components also its must follow parent child relationship. – Pankaj Prakash May 04 '21 at 05:48
For multiple case, then you need to use `@ViewChildren` decorator, also as long as there's no parent & child relationship, then you need to use service. – Liu Zhang May 04 '21 at 14:06

score 0 · Answer 2 · answered Aug 14 '21 at 13:26

After reading the problem I think you want to call the "submitData" method of "form" component whenever "save" method gets called on parent component. For this you can use "@Input()" method. it is generally used for passing the data from parent to child component same as our case.

So the solution will be something like below.

On parent component declare on property

isSubmitted: boolean = false;

then in the set this variable to true when the method "save()" gets called on parent.

save() {
    this.isSubmitted = true;
}

Now pass this variable to child component. to do this you need to pass this variable like below from parent template file.

<app-form [isSubmitted]="isSubmitted"></app-form>

Now that we are passing data from parent component we need to listen for the changes on child component. in child component we need to declare a "@Input()" directive like below.

export class Form {

@Input() isSubmitted: boolean;
 ...
}

after declaring this property we can now listen for the changes whenever the variable gets changed in parent component.

export class Form implements OnChanges {
     @Input() isSubmitted: boolean;
     ...

     // this is the angular life cycle hook which detects changes in input bound properties ( in our case "isSubmitted")
     ngOnChanges(changes: SimpleChanges) {
          if(changes && changes['isSubmitted'].currentValue){
               // calling the submit data method if the "isSubmitted" value changes to "true" from parent component.
               this.submitData(newUserForm: NgForm);
          }
     }
}

So this is how parent => child communication gets done in angular. Feel free to ask for any doubts. For more info you can check this link: parent-child-communication

Angular trigger function from outside component

2 Answers2