Skip to content

In stencil js, how can i check if button has been clicked in another component from a different class

I have a component called button.tsx, this components holds a function that does certain things when the button is clicked, this.saveSearch triggers the saveSearch() function.


  {((this.test1) || this.selectedExistingId) &&
                      (<button class="pdp-button primary"

In sentence.tsx i want to be able to see when this button is clicked and show a certain div if the user has clicked it.


           {onClick={saveSearch} &&  (<div class="styles-before-arrow">{this.langConfirmSearchSaved}</div>)}


You have a few options:

  1. You can attach a click event listener for the button component in sentence.tsx. Take note that this may be trickier if you are working with elements which are encapsulated in Shadow DOM:
addButtonLister(): void {
          .addEventListener('click'), (e) => {
      // add your logic here.
  1. You can use EventEmitter ( In your button.tsx, you can add this:
@Event({eventName: 'button-event'}) customEvent: EventEmitter;

Then add something like this on button’s onClick:

emitEvent() {

render () {
  return <button onClick={this.emitEvent}>{this.langSave}</button>

then from your sentence.tsx, add an event listener to your button component:

// say your button component's tag is <button-component>
        .addEventListener('button-event', (e) => {
    // your logic here.
  1. You can use Stencil Store, but depending on your overall use-case, I am not sure if this may be an overkill –