How to call lwc component from another lwc component?

please refer to my website for more blog posts related to salesforcehttps://www.cringycode.com/

let’s say that we have 2 LWC components namely databindingParent and databindingChild. So now we want to send data from databindingParent to databindingChild and display the passed data.

databindingChild.html

Let’s straight away jump to line 4. here I'm printing the value in item variable using “{item}”

databindingChild.js

So I declare a variable and named it “item” and added @api property to it, because I want this variable(item) to be publicly accessible.

The Lightning Web Components programming model has three decorators that add functionality to property or function.

@api,@track,@wire. For now, let's talk about @api and @track.

we can also use @track but the basic difference between @api and @track is, @api is a public rendering property whereas @track is private property. Tracked properties are also called private reactive properties.

But both @api and @track have rendering property.

Here I want to send data from one component to another so I need a public property that can hold the data that is sent from another component.

databindingParent.html

In line no 5 we are making a call to “databindingchild” component and passing a value(var1) for the public property “item” .so now let’s see what “var1" variable contains.

databindingParent.js

In the above js file, we’ve declared a public property named var1.

we’ve written a function changefn() which is called when a change occurs to the input text.

In line 5 we are getting the value from the input text and then storing it in the var1 variable.

Here is the output of the above component databindingparent.

Also, check this: Reset Lightning Input Fields in LWC

But we have a workaround, The user can navigate from one LWC to another by embedding the LWC in an Aura Component and then walking from the Aura Component to the LWC.

lWCSourceNavigation.HTML :

lWCSourceNavigation.JS:

lWCTargetNavigation.HTML :

lWCTargetNavigation.JS :

NavigationHelper.cmp :

NavigationHelperController.JS :

• Parent-to-Child Communication. To pass the details from a parent-to-child component, public methods or public properties can be used.
• Child-to-Parent Communication.
• Communication Between Unrelated Components.

However, there is a workaround, if you want to navigate the user from one LWC to another LWC, you can embed LWC in an Aura Component and navigate the user from LWC to an Aura Component.

Out of the box, LWC framework provides us helper methods to send the user from Lightning Web Component to an Aura Component.

In fact, there are a whole bunch of destinations to which we can navigate the user from a Lightning Web Component.

Let's look at the snippet to send a user from LWC to Aura Component (that has another LWC embedded in it).

This is the controller file of the Web Component.

This is how the configuration object is going to look like and pretty much all the info that we need to provide related to the navigation will be provided to this.

Just a heads up make sure you include the namespace before the key in the object that you provide for the key state.

Also, check this: Reset Lightning Input Fields in LWC

But we have a workaround, The user can navigate from one LWC to another by embedding the LWC in an Aura Component and then walking from the Aura Component to the LWC.

lWCSourceNavigation.HTML :

lWCSourceNavigation.JS:

lWCTargetNavigation.HTML :

lWCTargetNavigation.JS :

NavigationHelper.cmp :

NavigationHelperController.JS :