title: Understanding Angular module scope (for ngx-bootstrap)
body: <p>I'm kinda new to Angular and am having issues integrating ngx-bootstrap in my project when using ng modules...</p>
  
  <p>To be more brief - <strong>Everything works properly when I add html directly in app.component.html but won't work when I add the same code in app-<em>component</em> and declare it inside app.component.html</strong> </p>
  
  <hr>
  
  <p>Steps taken :</p>
  
  <ol>
  <li><p>Used Angular CLI 1.7.4 to generate a new project (with Angular 5.2.9)</p></li>
  <li><p>Used <code>npm install --save bootstrap ngx-bootstrap</code> and imported bootstrap.min.css in my style.css</p></li>
  <li><p>Created a new module called 'app-bootstrap.module.ts' in src/app,and included the following in it :</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
      
  @NgModule({
      imports: [BsDropdownModule.forRoot()],
      exports: [BsDropdownModule]
  })
  export class AppBootstrapModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>At this point, if I include the html code e.g. say for the dropdown button 
    in <code>app.component.html</code> (after importing above module too), it works as expected. 
    However, this is not what I want, so I went along with following steps.</p>
  </blockquote>
  
  <ol start="4">
  <li>Created a new component in 'dropdown' under src/app and included the following in it <code>dropdown.component.html</code> :</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn-group" dropdown&gt;
      &lt;button dropdownToggle type="button" class="btn btn-primary dropdown-toggle"&gt;
        Button dropdown
        &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul *dropdownMenu class="dropdown-menu" role="menu"&gt;
        &lt;li role="menuitem"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role="menuitem"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;/li&gt;
        &lt;li role="menuitem"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="divider dropdown-divider"&gt;&lt;/li&gt;
        &lt;li role="menuitem"&gt;
          &lt;a class="dropdown-item" href="#"&gt;Separated link&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
   </code></pre>
  </div>
  </div>
  </p>
  
  <ol start="5">
  <li>Created a module called <code>custom-components.module.ts</code> in src/app and declared dropdown component inside it : </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="6">
  <li>Imported <code>customComponentsModule</code> in <code>app.module.ts</code> as follows : </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//... 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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="7">
  <li><p>Added <code>&lt;app-dropdown&gt;&lt;/app-dropdown&gt;</code> inside <code>app.components.html</code></p></li>
  <li><p><strong>When I run <code>ng serve</code> here, the button shows up all styled up but when I click on it, nothing happens.</strong> As mentioned before, dropdown works when I put the same code in <code>app.component.html</code> - this lead me to believe there is some scope issue I am not getting. Frustratingly enough, no errors show up.</p></li>
  </ol>
  
  <p>Note : </p>
  
  <ol>
  <li><p>I've used a 'dropdown' component just for sake of brevity.</p></li>
  <li><p>If I have missed adding something important, kindly ask for same in comments and I'll provide it.</p></li>
  </ol>
  
  <p>Apologies for the big post; any help would be much appreciated, thank you!</p>