Как ограничить клавишу табуляции в модальном окне?

вы должны использовать класс на фоновой странице, у которого есть pointer-events: none;, когда модальное окно открыто. Просто используйте ngClass, чтобы его можно было динамически изменять при щелчке по вашему .btn и переключать модальное событие закрытия.

Поскольку в последней версии ngx-bootstrap (v2.4) нет исправления, я создал директиву для захвата фокуса клавиши табуляции в самом модальном поле.

Я использовал угловую версию: Angular 5.

Моя директива ниже.

Directive

import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
    selector: '[appSdbModalFocus]'
})
export class SdbModalFocusDirective {
    KEYCODE_TAB: number = 9;

    constructor(
        private hostElement: ElementRef
    ) {}

    ngOnInit() {}

    @HostListener("keydown", ["$event"])
    onKeyDown(e: KeyboardEvent): any {
        if (e.key === 'Tab' || e.keyCode === this.KEYCODE_TAB) {
            let focusableEls = this.hostElement.nativeElement;
            let modalContent = $(focusableEls).find('a, :input, [tabindex]');
            var firstFocusableEl = modalContent.first()[0];
            var lastFocusableEl = modalContent.last()[0];

            if (e.shiftKey) /* shift + tab */ {
                this.log(firstFocusableEl, lastFocusableEl, document);
                if (document.activeElement === firstFocusableEl) {
                    lastFocusableEl.focus();
                    e.preventDefault();
                }
            } else /* tab */ {
                this.log(firstFocusableEl, lastFocusableEl, document);
                if (document.activeElement === lastFocusableEl) {
                    firstFocusableEl.focus();
                    e.preventDefault();
                }    
            }
        }
    }
}

HTML

<form appSdbModalFocus>
...
</form>

Создал эту директиву с помощью ловушка-фокус-в-элементе