How to Call child component methods in parent component in Lightning Web Components(lwc)

Hello All,

Today we will disscuss hpw to use child component methods in parent component in lightning web components(lwc)

To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components

Child Component :-

// videoPlayer.js
import { LightningElement, api } from 'lwc';

export default class VideoPlayer extends LightningElement {
    @api videoUrl;

    @api
    get isPlaying() {
        const player = this.template.querySelector('video');
        return player !== null && player.paused === false;
    } }

<!-- videoPlayer.html --> <template> <div class="fancy-border"> <video autoplay> <source src={videoUrl} type={videoType} /> </video> </div> </template>

Parent components:

// methodCaller.js
import { LightningElement } from 'lwc';

export default class MethodCaller extends LightningElement {
    video = "https://www.w3schools.com/tags/movie.mp4";

    handlePlay() {
        this.template.querySelector('c-video-player').play();
    }}

For More Detsil Please refer salesforce link Call Methods on Child Components