In angular trying to open component A bootstrap modal from component C template they have not any parent-child relationship

Question

I'm using angular v14 with bootstrap 4 and rest api.I have 3 components,component A its parent component in it i've navbar with button to open the bootstrap modal under it is modal.Inside modal body i'hv its child component B selector,I'hv another component C from its template button i want to open modal window of component A for showing edited data.how i can achieve that? below is my code.

Component A template

**modal trigger icon**
<li class="nav-item">
   <a class="nav-link text-white" data-toggle="modal" data-target="#modelId" 
      (click) = "addClick()" >
   <i class="fa-solid fa-rectangle-ad fa-2xl"></i> </a>
</li>

<div class="modal fade" id="modelId" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Post Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <app-B [product]="product"></app-B>
            </div>
        </div>
    </div>
</div>

Component C template from which i want to open modal of component A

<td>
    <a class="a-trash" (click)="editClick(item)">
        <i class="fa-solid fa-pen-to-square fa-xl"></i>
    </a>
    <a class="a-trash">
        <i class="fa fa-trash fa-xl"></i>
    </a>
</td>