title: Angular 4/5/6 Global Variables
body: <p>I really struggle with creating global variables in my Angular 2 application.</p>
  <p>So I have my file called <strong>globals.ts</strong>, which looks like this:</p>
  <pre><code>import { Injectable } from &quot;@angular/core&quot;;
  
  
  @Injectable()
  export class Globals {
  
    var role = 'test';
  
  }
  </code></pre>
  <p>And I want to use the variable role in my HTML view of my component like this:</p>
  <pre><code>{{ role }} 
  </code></pre>
  <p>I already added the globals.ts file to my <strong>app.module.ts</strong> in the following way:</p>
  <pre><code>providers: [
    Globals
  ],
  </code></pre>
  <p>No matter what I did on this file, it just didn't work. What I don't want to do is to have to import the globals.ts file in every component manually, which is why I want to use the providers feature.</p>