-2

I got this on a button on x.component.html

(click)='xxManageSearchFormClick()'

but the problem is xxManageSearchFormClick is located in y.component.ts

and is there a way in angular x.component.html to be able to run the y.component.ts's functions?

This is kind of like running the function of a parent window (in traditional html/window/js interaction )

Average Joe
  • 4,521
  • 9
  • 53
  • 81
  • 1
    Here are the various ways to interact between components: https://angular.io/guide/component-interaction – JB Nizet Jan 28 '18 at 09:09
  • Your question is really unclear. You should know, that how components are related (parent-child, sibilings or routed) does impact in how we as developers can make them interact. Please use concrete examples in your question and more meaningful names. – Jota.Toledo Jan 28 '18 at 09:28
  • The question is clear enough. Read it again. But, Nour has already nailed it. – Average Joe Jan 28 '18 at 14:32
  • JB Nizet, the link you provided is very useful: https://angular.io/guide/component-interaction Thank you for that. – Average Joe Jan 28 '18 at 17:33

1 Answers1

1

You can use @output() to fire an event from the child component to the parent component once the button has clicked.

In your child component template (HTML):

<button type="button" (click)="onClickChlidComponent()">Click me</button>

The child component typescript file:

import {Output, EventEmitter} from '@angular/core';

@Component({
  selector:'x-component',
})
export class XComponent{
    @Output() buttonXClicked = new EventEmitter();

    onClickChlidComponent(){
      this.buttonXClicked.emit(null);//You can pass whatever you want throw the output
    }
}

Your parent component template is:

<x-component (buttonXClicked)="onChildXButtonClicked($event)"></x-component>

Your parent component typescript:

onChildXButtonClicked(outputData:any){
    alert('button on the x component has clicked');
}
Nour
  • 5,609
  • 3
  • 21
  • 24
  • So it is possible. Could you tell me what steps are involved? – Average Joe Jan 28 '18 at 09:09
  • Yeah it's possible, please follow the official documentation https://angular.io/guide/component-interaction and i will update my answer to include an example. – Nour Jan 28 '18 at 09:10
  • 1
    @AverageJoe, your question is a common question, If your component are not parent-child, you can use a service, e.g. https://stackoverflow.com/questions/48069554/how-to-execute-a-function-from-another-component-that-is-not-a-sibling-of-the-fi – Eliseo Jan 28 '18 at 13:32