title: Angular 5 TypeScript Bootstrap Dropdown not working via JavaScript
body: <p>I followed the bootstrap way and added the demo example from <a href="https://getbootstrap.com/docs/3.3/javascript/#via-data-attributes-1" rel="nofollow noreferrer">https://getbootstrap.com/docs/3.3/javascript/#via-data-attributes-1</a> into my angular app inside a navbar.</p>
  
  <p>This did not work out of the box as toggling the dropdown had no effect.
  After reading further I came acrosss activating the dropdown via javascript. 
  <a href="https://getbootstrap.com/docs/3.3/javascript/#via-javascript-1" rel="nofollow noreferrer">https://getbootstrap.com/docs/3.3/javascript/#via-javascript-1</a></p>
  
  <p>I executed <code>$('.dropdown-toggle').dropdown()</code> in the Browser and voila the Dropdown worked as expected. Now I wanted to add this JavaScript call to the <code>OnInit</code> block of my header component like this:</p>
  
  <pre><code>ngOnInit(): void {
     $('.dropdown-toggle').dropdown();
  }
  </code></pre>
  
  <p>Unfortunately this does not work, as the compiler complains with:</p>
  
  <blockquote>
    <p>ERROR in src/app/header/header.component.ts(16,27): error TS2339:
    Property 'dropdown' does not exist on type 'JQuery'.</p>
  </blockquote>
  
  <p>Jquery should work, as it is included in my package.json <code>"@types/jquery": "^3.3.0"</code> and bootstrap version is <code>"bootstrap": "^3.3.7",</code></p>