Call blazor component on button click event

Question

Hi I have a child componenet positiongrid and I want to invoike this coponent on button click inside parent compoenet

Parent Compoenent Code below

 <div class="form-group col-md-3">
        <button class="btn btn-primary" @onclick="DisplayPositionRefGrid">
          Create
        </button>
    </div>
</div>


   <div class="form-row" id="divPositionRefGrid" hidden="@HideGrid">
       <div class="form-group col-md-12">
           <PositionRefGrid>

           </PositionRefGrid>

          
       </div>
   </div>

The issue is that the child component loading at the same time when the parent is loading but I want to load the child component on button click method 'DisplayPositionRefGrid'

Answer 1

Use Boolean variable to conditionally display the child component.

<div class="form-group col-md-3">
        <button class="btn btn-primary" @onclick="DisplayPositionRefGrid">
          Create
        </button>
    </div>


@if (ShowGrid )
{
   <div class="form-row" id="divPositionRefGrid" hidden="@HideGrid">
       <div class="form-group col-md-12">
           <PositionRefGrid>

           </PositionRefGrid>

          
       </div>
   </div>
}

@code{

private bool ShowGrid {get;set;}

void DisplayPositionRefGrid()
{
  ShowGrid =true;

//other stuf
//...
}
}

Try it online