3

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.

1 Answer 1

6

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

3
  • Hey Sanket thanks for response.but unfortunately got flag value "undefined".i tried by your way.
    – jsmith
    Jun 22, 2019 at 5:10
  • do your flagOne property has some value? I think your property is empty. Jun 22, 2019 at 5:27
  • I set value like this: handleChange(event) { const selectedOption = event.detail.value; this.value = event.detail.value; this.searchKey=''; this.flagOne = 1; }
    – jsmith
    Jun 22, 2019 at 5:38

You must log in to answer this question.

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