1

I have this Button Icon in one LWC:

<lightning-button-icon icon-name="utility:search"  alternative-text="search" title="search" onclick={handleOnClick}></lightning-button-icon>

I want fire a new LWC (called for example newLwc) on the button click.

How should I handle the on click event to fire the new LWC?

Improve this question

2 Answers 2

Reset to default
5

The standard solution would be to simply show the new component:

<template>
  <lightning-button-icon icon-name="utility:search" onclick={showSearch}></lightning-button-icon>
  <c-new-lwc if:true={showSearchComponent}></c-new-lwc>
</template>

import { LightningElement, track } from 'lwc';
export default class MyFirstLwc extends LightningElement {
  @track showSearchComponent = false;
  showSearch() {
    this.showSearchComponent = true;
  }
}
Improve this answer
4
  • It gives me this error: No MODULE named markup://c:secondLwc found : [markup://c:firstLwc], the secondLwc is already deployed and i checked the isExposed variable that it's true in both the components.. Do you know what it could be?
    – Teemo_smr
    Mar 11, 2020 at 14:19
  • @Teemo_smr That sounds like an Aura error, not a LWC error? I think we need to see some more code.
    – sfdcfox
    Mar 11, 2020 at 14:36
  • I resolved, I wrote wrong the call to second lwc. Thank you for your help!
    – Teemo_smr
    Mar 11, 2020 at 14:47
  • @Teemo_smr You're welcome! Glad I help point you in the right direction.
    – sfdcfox
    Mar 11, 2020 at 14:47
0

Three cases:

IF newLwc is a child component:

https://developer.salesforce.com/docs/component-library/tools/playground/lcQ8W23i/2/edit

ELSE IF newLwc is a parent Component: Use Events tocommunicate: https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/events

ELSE IF newLwc has no relation: Use PubSub https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/events_pubsub

with in the same DOM Lightning Message services can also be used: https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/lwc.use_message_channel

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .