title: How to link elements in angular 2?
body: <p>I'm trying to build a feature for my website in which I'm providing user to change theme of the site according to them. Just getting started, I thought to keep 'Dark theme'. So, I'm trying to implement the dark theme separately. 
  <a href="https://i.stack.imgur.com/BiWBZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BiWBZ.png" alt="enter image description here"></a></p>
  
  <p>As you can see above in the screenshot, a modal opens up in which a user can click on dark theme and change the colors of site. This modal component is called <code>customize.component.html</code> . In the background, you can see the results of website. I call this <code>results.component.html</code> . </p>
  
  <p><code>customize.component.ts</code></p>
  
  <pre><code>&lt;link type="text/javascript" href="../../assets/themes/theme.js" id="theme"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;!-- Start ignoring HTMLLintBear --&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;!-- Stop ignoring HTMLLintBear --&gt;
        &lt;h2 class="modal-title" id="my-modal-label"&gt;Customization&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;button class="theme-button" id="dark" onclick="darkTheme(title)"&gt;Dark Theme&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>results.component.ts</code></p>
  
  <pre><code>&lt;!-- Customization modal-box --&gt;
  &lt;link type="text/javascript" href="../../assets/themes/theme.js"&gt;
  &lt;div class="modal fade" id="customization" tabindex="-1" role="dialog" aria-labelledby="myModallabel"&gt;
      &lt;app-customize&gt;&lt;/app-customize&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my code snippet for both the components. I have created another file name <code>theme.js</code> in where theme-process will work. But my code is not working. </p>
  
  <p>theme.js</p>
  
  <pre><code> function darkTheme(id) {
      var el = document.getElementById(id);
      el.style.color = "red";
  }
  </code></pre>
  
  <p>How should I take element with an id from <code>results.component.ts</code> ? I'm not able to implement the feature. It would be great if someone can help me out! Thanks! </p>
  
  <p>NOTE - I'm not using Angular Material 2 in my project. So, I have to implement the feature of providing themes to user without using Angular Material 2.</p>