[SalesForce] How to pass @api property from one lwc to another lightning web component

I have three lightning web components.and i plug two component in one parent component and i want value from one of the plugged component to another component.
I have following parent component product.html:

 <template>  
    <lightning-card>  
        <c-order-list currentpage={page} onrecordsload={handleRecordsLoad} pagesize={pagesize}></c-order-list>  
        <div class="slds-m-around_medium">  
        <c-paginator-bottom onprevious={handlePrevious} onnext={handleNext} onfirst={handleFirst}  
            onlast={handleLast} currentpage={page} totalrecords={totalrecords} pagesize={pagesize}>  
        </c-paginator-bottom>  
        </div>  
    </lightning-card>  
</template>

And below is orderList.js:

import {LightningElement,track,wire,api} from 'lwc';
export default class orderList extends LightningElement {
    @api flagOne=false;
    handleChange(event) {
        const selectedOption = event.detail.value;
        this.value = event.detail.value;
        this.searchKey='';
        this.flagOne=true;
        this.LoadData(selectedOption);
        this.currentpage = 1;
        this.loadSearchData(this.value);
    }
}

And paginatoBottom.js is:

import { LightningElement, api } from 'lwc';  
export default class PaginatorBottom extends LightningElement {
}

Now I want pass @api flagOne from orderList.js to paginatoBottom.js.
I tried it but got nothing.Please me help me to resolve.

Best Answer

You can define an api property in your paginatoBottom.js and 

import { LightningElement, api } from 'lwc';  
 export default class PaginatorBottom extends LightningElement {
 @api flag;
}

and when calling the c-paginator-bottom in the parent component, just pass the data like this:- 

<c-paginator-bottom flag={flagOne} onprevious={handlePrevious} onnext={handleNext} onfirst={handleFirst} onlast={handleLast} currentpage={page} totalrecords={totalrecords} pagesize={pagesize}>  
</c-paginator-bottom>

A working example would be:- compositionBasics

Related Topic