anchor tag keyup.enter event not opening up bootstrap based modal

Question

In my angular 6 application, I am having below code as part li tag, wherein clicking on it opens up a bootstrap modal window (not ngbModal), However it is not working on Enter key event of keyboard or space key event of keyboard.

.html file

                <li>
                    <a 
                        (click)="closeModal();" 
                        (keyup.enter)="closeModal();" 
                        (keyup.Space)="closeModal();" 
                        data-toggle="modal" 
                        data-target="#profile-modal" 
                        routerLinkActive="active" oncontextmenu="return false" style="cursor: pointer;"  tabindex="0" >
                       Edit Profile
                    </a>
                </li>

.ts code

closeLinksModal() {
        $('#profile-modal').modal('hide');
    }

Please note that the target modal here is of bootstrap HTML-based modal, not ngbModal. Click event works well, However, enter & space event is not opening the modal window. This works well if I try to open ngbModal based modal on enter and space keys.

Answer 1

As I can observe from code snippet you shared, method mentioned in template differs from the one mentioned in ts file. Can you correct that and try.