Глобальная переменная не устанавливается при настройке через jQuery в проекте Angular 7

Question

В моем проекте angular 7 мне нужно принудительно использовать плагин jQuery jQuery Flipster , поскольку угловые плагины не имеют схожих функциональных возможностей. Я знаю

Angular предназначен для прямой DOM-манипуляции с использованием такие библиотеки, как JQuery, не нужны.

API Flipster должен быть написан внутри $(document).ready(function(){}), в противном случае он не работает. Проблема в том, что я определил логическую переменную viewBtn, я пытаюсь передать логическое значение при переключении элементов, но он возвращает undefined в области действия $(document).ready(function(){}), и значение не изменяется в html.

export class GaugeSurveyComponent implements OnInit, AfterViewInit{
    viewBtn:Boolean=false;

    ngAfterViewInit(): void {

      $(document).ready(function(){

        var carousel = (<any>$("#carousel")).flipster({
            onItemSwitch: function(currentLi,previousLi){
                console.log(this.viewBtn) // returns undefined
                this.viewBtn=true;
            }
        })
    })

  }
}

И почему этот плагин нужно вызывать в $(document).ready(function(){}), так как я писал внутри ngAfterViewInit().

Заранее спасибо.