event emitter and *ngIf render component on second click in Angular

I have one modal which is render based on condition. I use jQuery to load this modal conditionally. I’ve created this modal as separate component. In bootstrap 4 it’s working fine, but in bootstrap 5 it did not render on first click. I need to click two times to render my modal.

button-modal.componenet.html

 <div *ngIf="isVPN && isAddDeviceEnabled" class="mb-2">
       <button
          type="button"
          (click)="addVpnEntry.emit({ isAddVpn: true, openFor: 'ea' })"
          class="btn btn-outline-primary"
          data-bs-toggle="modal"
          data-bs-target="#addVpnInterface"
          >
       {{ 'Link EA'}}
       </button>
    </div>

botton-modal.component.ts

      @Component({
            selector: 'app-botton-modal',
            templateUrl: './botton-modal.component.html'
        })
        export class BottonModalComponent{
        @Output() addVpnEntry?: EventEmitter<any> = new EventEmitter<any>();
        
        linkPEDevice(isAddVPN: boolean, openFOR: string) {
                this.addVpnEntry.emit({ isAddVpn: isAddVPN, openFor: openFOR });
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

placed-modal-page.component.html

<!-- Modal -->
    <div *ngIf="isAddVpnEntry">
        <div id="addVpnInterface" class="modal fade" role="dialog">
            <modal-implementation-componenet
                *ngIf="openReason === 'ea'"
                (close)="close($event)"
                [vpnData]="selectedVpnInterface"
                [deviceInfo]="deviceInfo"
            >
            </modal-implementation-componenet>
        </div>
    </div>

placed-modal-page.component.ts

  @Component({
        selector: 'app-placed-modal-page',
        templateUrl: './placed-modal-page.component.html',
        styleUrls: ['./placed-modal-page.component.css'],
        encapsulation: ViewEncapsulation.None})
        export class DeviceInterfacesEthernetComponent implements OnDestroy {
        @ViewChild(BottonModalComponent) childcomponent: BottonModalComponent;
    addVpnEntry({ isAddVpn, openFor }) {
            if (isAddVpn) {
                this.openReason = openFor;
                $('#addVpnInterface').modal('show');
                this.isAddVpnEntry = true;
            }
        }

When I click first time, It throws following error and add the placed-modal-page.component.html code in DOM and then on second click the modal is showing.

    caught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at bt._initializeBackDrop (scripts.js:11:138858)
    at new bt (scripts.js:11:137752)
    at bt.getOrCreateInstance (scripts.js:11:115079)
    at HTMLButtonElement.<anonymous> (scripts.js:11:141870)
    at HTMLDocument.We (scripts.js:11:111355)
    at W.invokeTask (polyfills.js:23:9522)
    at W.runTask (polyfills.js:23:4509)
    at W.invokeTask [as invoke] (polyfills.js:23:10671)
    at oe (polyfills.js:23:24586)
    at ye (polyfills.js:23:25005)

Also, if we emit object then how we can obtain various field valued using $event variable. IN our case we have object of {isAddVPN: boolean, openFOR: string}?