title: Global function available through all app Angular2
body: <p>I have a PermissionService, which provide user roles. At the server-side data will not be uploaded if the user is not corresponds on role. The back-end is written with asp.net web api, which will use attributes to secure data. On upload page will be static upload user roles, the idea is just to show or hide elements on page which depending from user role.
  The PermissionsService check avaiable role in its array. There are methods like isSeller(), isManager(). And all what i want is to provide accessibility from each view. For now i have this implementation.</p>
  
  <p><strong>permission.service</strong></p>
  
  <pre><code>import { Injectable }  from "@angular/core";
  
  export enum Roles {
      Admin,
      Manager,
      Moderator,
      Seller
  }
  
  interface IPermissionDictionary {
      [key: string]: boolean;
  }
  
  @Injectable()
  export class PermissionService {
      private permissions: IPermissionDictionary = {};
  
      public constructor() {
          this.emitPermissions();
      }
  
  private emitPermissions(): void {        
      let selector = document.querySelectorAll("#roles &gt; span");
      let availableRoles = Array.from(selector).map(element =&gt; element.textContent);
  
      for (let role in Roles) {
          if (!/^\d+$/.test(role)) { // for strings types in Roles
              this.permissions[role] = availableRoles.indexOf(role) &gt; -1;
          }
      }
  }
  
  public isInRole(role: string): boolean {
      return this.permissions[role];
  }
  
  public isAdmin() {
      return this.isInRole(Roles[Roles.Admin]);
  }
  
  public isSeller() {
      return this.isInRole(Roles[Roles.Seller]);
  }
  
  public isManager() {
      return this.isInRole(Roles[Roles.Manager]);
  }
  
  public isModerator() {
      return this.isInRole(Roles[Roles.Moderator]);
  }
  }
  </code></pre>
  
  <p><strong>app.component</strong></p>
  
  <pre><code>import { Component } from "@angular/core";
  import { ROUTER_DIRECTIVES } from "@angular/router";
  
  import { PermissionService } from "./share/permission.service";
  import { HomeComponent } from "./home/home.component";
  import { OrderComponent } from "./order/order.component";
  
  @Component({
      selector: "admin-panel",
      templateUrl: "../app/app.template.html",
      directives: [ROUTER_DIRECTIVES],
      precompile: [HomeComponent, OrderComponent]
  })
  
  export class AppComponent {
      constructor(private permissionService: PermissionService) {
  
      }
  }
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import { bootstrap }    from "@angular/platform-browser-dynamic";
  import { AppComponent } from "./app.component";
  import { APP_ROUTES_PROVIDER } from "./app.routes";
  import { HTTP_PROVIDERS } from '@angular/http';
  import { PermissionService } from "./share/permission.service";
  bootstrap(AppComponent, [APP_ROUTES_PROVIDER, HTTP_PROVIDERS, PermissionService]);
  </code></pre>
  
  <p>For now to access the method of PermissionService need to inject it in component constructor. And in template is is use like</p>
  
  <pre><code>&lt;div *ngIf="permissionService.isAdmin()"&gt;will show if you are admin&lt;/div&gt;
  </code></pre>
  
  <p>But every time to inject my service in each component where i want to use it seems for me strange. And i just want to get access it from every part of my app like:</p>
  
  <pre><code>&lt;div *ngIf="isAdmin()"&gt;will show if you are admin&lt;/div&gt;
  </code></pre>