Clarity modal is not showing in angular 13

Question

I don't know why I cannot see the Modal box. I used Parent and child interaction in angular using @ViewChild. Please find the code below:

broadcast.component.ts (Parent)

import {Component, ViewChild} from "@angular/core";
import { showDetailsComponent } from "./showDetailsComponent";
import { ClrModal } from "@clr/angular";

@Component({
    selector:"broadcast-component",
    templateUrl:"./broadcast.component.html"
})

export class BroadcastComponent{
    @ViewChild(showDetailsComponent)
    modal!: showDetailsComponent;
    showDetails: any;
    openModal(){
        this.modal.open = true;
    }
}

broadcast.component.html (Parent template)

<div class="card">
        <div class="card-header">
          Header
        </div>
        <div class="card-block">
          <div class="card-media-block">
            <img src="https://via.placeholder.com/60?text=Image" class="card-media-image" />
            <div class="card-media-description">
              <span class="card-media-title">
                Project A
              </span>
              <span class="card-media-text">
                Owner: John Doe
              </span>
            </div>
          </div>
          <div class="card-text">
            ...
          </div>
        </div>
        <div class="card-footer">
          <button type="button" (click)="openModal()" class="btn btn-sm btn-link">Details</button>
      <button class="btn btn-sm btn-link">Broadcast</button>
        </div>
      </div>
      <showDetails-component></showDetails-component>

showDetails.html (child template)

    <clr-modal [(clrModalOpen)] = "open">
    <h3 class="modal-title">I have a nice title</h3>
    <div class="modal-body">
      <p>But not much to say...</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" >Cancel</button>
      <button type="button" class="btn btn-primary" >Ok</button>
    </div>
  </clr-modal>

showDetails.component.ts (child)

import { Component } from "@angular/core";


@Component({
    selector:"showDetails-component",
    templateUrl:"./showDetails.html"
})

export class showDetailsComponent{
    open:any= false;
   
}

N.B - Both components (showDetails and broadcast) are included in the AppModule declarations.