title: Angular 2 Component using External JS libraries
body: <p>I just started <code>Angular2</code> and while creating a <code>navbar-component</code>, I am stuck on how to use the external <code>JS files</code>. <code>CSS</code> is working fine but i am not able to show <code>drop-down</code> and <code>toggle-button</code> for mobile-view. So, I guess <code>javascript</code> is not working.</p>
  
  <p>I am using this library <code>mdb</code> <a href="http://mdbootstrap.com/components/navbar/" rel="nofollow">navbar-materialized-bootsrap</a>. I need to use these three <code>JS-files</code>. 
  <code>mdb.min.js</code>
  <code>bootsrap.min.js</code>
  <code>jquery2.2.3.min.js</code></p>
  
  <p>Right now,I am just using the <code>script-tag</code> to load these files in <code>index.html</code>. Please guide me ?</p>
  
  <p>Here are some of my files. -----> </p>
  
  <p><code>navbar.component.ts</code> </p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector:'navbar', 
    templateUrl: 'navbar.component.html',
    styleUrls: [
      'navbar.component.css'
    ],  
  })
  
  export class NavbarComponent {
    title='Doctor Application';
  }
  </code></pre>
  
  <p><code>navbar.component.html</code></p>
  
  <p>
  </p>
  
  <pre><code>&lt;!-- Collapse button--&gt;
  &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2"&gt;
      &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
  &lt;/button&gt;
  
  &lt;div class="container"&gt;
  
      &lt;!--Collapse content--&gt;
      &lt;div class="collapse navbar-toggleable-xs" id="collapseEx2"&gt;
          &lt;!--Navbar Brand--&gt;
          &lt;a class="navbar-brand"&gt;{{title}}&lt;/a&gt;
          &lt;!--Links--&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link"&gt;Doctors &lt;span class="sr-only"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link"&gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item btn-group"&gt;
                  &lt;a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Cities&lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
                      &lt;a class="dropdown-item"&gt;Lahore&lt;/a&gt;
                      &lt;a class="dropdown-item"&gt;Karachi (Coming Soon)&lt;/a&gt;
                      &lt;a class="dropdown-item"&gt;Islamabad (Coming Soon)&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!--Search form--&gt;
          &lt;form class="form-inline"&gt;
              &lt;input class="form-control" type="text" placeholder="Search"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;!--/.Collapse content--&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><code>index.html</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base href="/"&gt;
  &lt;title&gt;Angular Tour of Heros&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="styles.css"&gt;
  &lt;!-- 1. Load libraries --&gt;
   &lt;!-- Polyfill(s) for older browsers --&gt;
  &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
  &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
  &lt;!-- 2. Configure SystemJS --&gt;
  &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
  &lt;!-- 3. Configure your own JS files --&gt;
  &lt;script src="static/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/js/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/js/mdb.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    System.import('app').catch(function(err){ console.error(err); });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
   &lt;app&gt;Loading your application&lt;/app&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>