Pass data from one LWC component to another LWC component using @api decorator

 We have two LWC component parentLwcComponent and childLwcComponent, now we need to pass a data which user enter any value in parent component to child component.

parentLwcComponent.html

Here we are calling the child component on line 4 and using onchange event to get the value and assign to a @api decorator variable.

parentLwcComponent.js

Here using event.target method we are getting value from input element and assigning to @api decorator. because of reactive property of @api, when the value changes automatically the value is passed to the child component parameter.

childLwcComponent.cmp

Here itemOfChild property captures the value from parent.

childLwcComponent.html

Lightning Web Component Concepts

 Pass data from one LWC component to another LWC component using @api decorator

Navigate from one LWC to another LWC with out using Aura Component