The variable kamalValue coming undefined in child template

<template>

    <lightning-card title="ParentToChild" >

    <lightning-input value={kamalValue} type="text" label="kamalPublicMethodTest" ></lightning-input>

    <lightning-button label="click" variant="brand" onclick={callChildCMP}></lightning-button>

    <c-public-method-child></c-public-method-child>

</lightning-card>

</template>

 

 

import { LightningElement,track} from 'lwc';

 

export default class PublicMethodParent extends LightningElement {

 

    @track kamalValue;

 

    callChildCMP(){

     const childCMP= this.template.querySelector('c-public-method-child');

     

     

    childCMP.changeMessage(this.kamalValue);

   

}

}

 

 

 

<template>

    

 

    Message Will Come here from Parent Component :- {kamalValue}

</template>

 
 

 

import { LightningElement,track,api } from 'lwc';

 

export default class PublicMethodChild extends LightningElement {

 

    @track kamalValue;

      

    @api

     changeMessage(tmpVariable){

 

       

        this.kamalValue='Value changesample->'+tmpVariable;

        

    }

 

}

please reply to kamalakar.aachi@yahoo.com