How to show and hide the form in Lightning WebComponent

formFunctionality.html
======================
<template>
   <template if:true={booleanvar}>
<lightning-button label="cancel" onclick={handleCancel}>
</lightning-button><br/>
    <lightning-input label="FirstName" placeholder="Enter FirstName">
</lightning-input>
<lightning-input label="LastName" placeholder="Enter LastName">
</lightning-input>
<lightning-input label="Email" placeholder="Enter Email">
</lightning-input>
<lightning-input label="Mobile" placeholder="Enter Mobile">
</lightning-input>
    </template>
   <template if:false={booleanvar}>
<lightning-button label="ShowForm" variant="brand" onclick={handleClick}>
</lightning-button>
    </template>
</template>

formFunctionality.js
====================
import { LightningElement,api } from 'lwc';

export default class FormFunctionality extends LightningElement
{
    @api booleanvar=false;
    handleClick()
    {
        this.booleanvar=true;
 
    }
    handleCancel()
    {
        this.booleanvar=false;
    }
}