angular - Understanding Angular module scope (for ngx-bootstrap)

Question

I'm kinda new to Angular and am having issues integrating ngx-bootstrap in my project when using ng modules...

To be more brief - Everything works properly when I add html directly in app.component.html but won't work when I add the same code in app-component and declare it inside app.component.html

---

Steps taken :

1. Used Angular CLI 1.7.4 to generate a new project (with Angular 5.2.9)

2. Used npm install --save bootstrap ngx-bootstrap and imported bootstrap.min.css in my style.css

3. Created a new module called 'app-bootstrap.module.ts' in src/app,and included the following in it :

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

At this point, if I include the html code e.g. say for the dropdown button in app.component.html (after importing above module too), it works as expected. However, this is not what I want, so I went along with following steps.

4. Created a new component in 'dropdown' under src/app and included the following in it 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. Created a module called custom-components.module.ts in src/app and declared dropdown component inside it :

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. Imported customComponentsModule in app.module.ts as follows :

//... 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. Added <app-dropdown></app-dropdown> inside app.components.html

8. When I run ng serve here, the button shows up all styled up but when I click on it, nothing happens. As mentioned before, dropdown works when I put the same code in app.component.html - this lead me to believe there is some scope issue I am not getting. Frustratingly enough, no errors show up.

Note :

1. I've used a 'dropdown' component just for sake of brevity.

2. If I have missed adding something important, kindly ask for same in comments and I'll provide it.

Apologies for the big post; any help would be much appreciated, thank you!