title: Scope html element
body: <p>Recently I started to play with Angular 2 and TypeScript and I was wondering how I would be able to acces a <code>Singleton Class</code> throughout the webpage.</p>
  
  <p>What i'm exacly making is a <code>UIManagerService</code> that currently holds only a <code>boolean</code> to check if a UI component is being accessed.</p>
  
  <p>With this <code>boolean</code> I want a class to be toggeled on my <code>&lt;html&gt;</code> element :</p>
  
  <pre><code>.noselect {
      -o-user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none; 
  }
  </code></pre>
  
  <p>And acces it like this: </p>
  
  <pre><code>&lt;html [class.noselect] = "UIManagerService.HoldingUI"&gt; 
   ...
  &lt;/html&gt;
  </code></pre>
  
  <p>More <code>Components</code> will acces this <code>Singleton class</code> in the end.</p>
  
  <hr>
  
  <p><strong>My Approach</strong></p>
  
  <p>In other language I would use singleton classes for manager-like classes. This is the approach I also toke:</p>
  
  <pre><code>export class UIManagerService {
      holdingUI:Boolean;
  
      static instance : UIManagerService;
      static isCreating: Boolean = false;
  
      constructor() {
          if(!UIManagerService.isCreating) {
              throw new Error("You can't call new in singletong instance");
          }
      }
  
      static getInstance() {
          if(UIManagerService.instance == null) {
              UIManagerService.isCreating = true;
              UIManagerService.instance = new UIManagerService();
              UIManagerService.isCreating = false;
          }
  
          return UIManagerService.instance;
      }
  
      setHoldingUI(value) {
          this.holdingUI = value;
      }
  
      getHoldingUI() {
          return this.holdingUI;
      }
  }
  </code></pre>
  
  <p>(props to <a href="http://twofuckingdevelopers.com/2015/04/angular-2-singleton-service/" rel="nofollow">twofuckingdevelopers</a>)</p>
  
  <p>Now this works great once I try to acces it in a <code>Component</code>: </p>
  
  <pre><code>export class Slider { 
  
      constructor() {
  
      }
  
      mousedown(event) {
          UIManagerService.getInstance().setHoldingUI(true);
          console.log(UIManagerService.getInstance().getHoldingUI());
      }
  }
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p>Nkmol</p>