Изменение модели в функции renderer.listen в Angular 5

Question

У меня есть пользовательский раскрывающийся список в моем приложении. Мне нужно обрабатывать щелчки за пределами компонента, чтобы скрыть раскрывающийся список. Я хочу сделать это динамически.

HostListener это не так, потому что он добавляет прослушиватели событий для всех выпадающих компонентов на странице. Поэтому я решил добавить и удалить слушателя динамически с renderer.listener, Так что у меня есть функция, которая срабатывает, когда пользователь нажимает элемент ввода:

onClickInput() {
 if (this.isOpened) {
  return this.isOpened = false;
 }
 this.clickOutsideHandler();
}

куда clickOutsideHandler является:

clickOutsideHandler() {
 this.clickOutside = this.renderer.listen('document', 'click', (evt) => {
  if (!this.el.nativeElement.contains(evt.target) && this.isOpened) {
    this.isOpened = false;
    this.cdRef.detectChanges();
    this.clickOutside();
  }
 });
}

Это лучшее решение для использования this.cdRef.detectChanges()потому что angular не обновлял представление без него при изменении this.isOpened = false; в renderer.listener, Есть ли лучший способ сделать это?