title: how to implement a js function in an Angular 2 component
body: <p>I have a web page and I want to improve it with angular 2, and I would like to use my JS functions in the angular component, this is an example of what I have:</p>
  
  <p>this is my app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
  selector: 'myApp',
  template: `
      &lt;div&gt;
           &lt;label for="Hour"&gt;Start:&lt;/label&gt;
           &lt;select id="Hour" class="form-control"&gt;
           &lt;/select&gt;
      &lt;/div&gt;
      `
  })
  export class MyApp {}
  </code></pre>
  
  <p>then I have my JS with a function that will fill the select with an inner-html:</p>
  
  <pre><code>function fillValues() {
  var d = new Date();
  var n = d.getHours();
  var options = "";
  for (var i = 0; i &lt;= 23; i++) {
      if (i == n) {
          options += "&lt;option id=" + i + " value=" + i + " selected&gt;" + i + "&lt;/option&gt;";
      } else {
          options += "&lt;option id=" + i + " value=" + i + "&gt;" + i + "&lt;/option&gt;";
      }
  }
  document.getElementById('Hour').innerHTML = options;
  }
  </code></pre>
  
  <p>and in the index.html I call the component and the JS:</p>
  
  <pre><code>&lt;body&gt;
      &lt;myApp&gt;Loading...&lt;/myApp&gt;
      &lt;script src=“assets/js/my_js.js”&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>my question is, how can I still use my JS functions and use them inside my components?</p>