Понимание области действия углового модуля (для ngx-bootstrap)

Question

Я немного новичок в Angular и у меня проблемы с интеграцией ngx-bootstrap в мой проект при использовании модулей ng...

Чтобы быть более кратким - все работает правильно, когда я добавляю html непосредственно в app.component.html, но не работает, когда я добавляю тот же код в app- компонент и объявляю его внутри app.component.html

---

Предпринятые шаги:

1. Использовал Angular CLI 1.7.4 для создания нового проекта (с Angular 5.2.9)

2. Используемый npm install --save bootstrap ngx-bootstrap и импортированные bootstrap.min.css в моем style.css

3. Создал новый модуль с именем app-bootstrap.module.ts в src/app и включил в него следующее:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
    
@NgModule({
    imports: [BsDropdownModule.forRoot()],
    exports: [BsDropdownModule]
})
export class AppBootstrapModule { }

На данный момент, если я включу HTML-код, например, скажем для кнопки выпадающего в app.component.html (после импорта вышеупомянутого модуля тоже), он работает как положено. Тем не менее, это не то, что я хочу, поэтому я пошел вместе со следующими шагами.

4. Создал новый компонент в раскрывающемся меню под src/app и включил в него следующее dropdown.component.html:

<div class="btn-group" dropdown>
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
      Button dropdown
      <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li role="menuitem">
        <a class="dropdown-item" href="#">Action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Another action</a>
      </li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Something else here</a>
      </li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem">
        <a class="dropdown-item" href="#">Separated link</a>
      </li>
    </ul>
  </div>
 

5. Создан модуль под названием custom-components.module.ts в src/app и объявленном выпадающем компоненте внутри него:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DropdownComponent } from './dropdown/dropdown.component';

@NgModule({
  imports: [CommonModule],
  declarations: [DropdownComponent],
  exports: [DropdownComponent]
})
export class CustomComponentsModule { }

6. импортный customComponentsModule в app.module.ts следующее:

//... Bootstrap and Components Modules
import { AppBootstrapModule } from './app-bootstrap.module';
import { CustomComponentsModule } from './custom-components.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CustomComponentsModule, //Custom Components
    AppBootstrapModule //Bootstrap Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. добавленной <app-dropdown></app-dropdown> внутри app.components.html

8. Когда я бегу ng serve здесь кнопка показывает все стилизованные, но когда я нажимаю на нее, ничего не происходит. Как упоминалось ранее, выпадающий список работает, когда я помещаю тот же код в app.component.html - это заставило меня поверить, что есть проблема, которую я не понимаю. Довольно разочаровывает, никаких ошибок не появляется.

Замечания:

1. Я использовал "выпадающий" компонент просто для краткости.

2. Если я пропустил добавление чего-то важного, просим об этом в комментариях, и я предоставлю это.

Извинения за большой пост; любая помощь будет высоко ценится, спасибо!