title: What's an alternative for root scope in angular 2?
body: <p>I want the child component to access the shared service take the data and after injecting the child component to main component. I want the data of the <em>sharedservice(rootscope)</em> to directly put the data in mainComponents HTML, <a href="https://stackoverflow.com/questions/31707789/use-rootscope-variables-in-my-html">like here</a>.</p>
  
  <p><strong>mainComponent.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import {ChildComponent} from './child';
  import {AppServiceService} from './app-service.service';
  
  @Component({
    moduleId: module.id,
  
    selector: 'rootscope-app',
  
    templateUrl: 'rootscope.component.html',
  
    styleUrls: ['rootscope.component.css'],
  
    directives:[ChildComponent]
  
  })
  
  export class RootscopeAppComponent {
  
    title = 'rootscope works!';
  
    display:any;
  
    constructor(appServiceService:AppServiceService){  
  
      this.display=appServiceService.getter();
  
    }
  }
  </code></pre>
  
  <p><strong>sharedService.ts</strong></p>
  
  <pre><code>import { Injectable} from '@angular/core';
  
  
  @Injectable()
  
  export class AppServiceService {
  
    ser = "hello i am from service";
  
    public data: any;
  
    constructor() {
  
    }
  
    settter(data: any) {
  
      this.data = data;
  
    }
  
    getter() {
  
      return this.data;
    }
  }
  </code></pre>
  
  <p><strong>childComponent of mainComponent</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import {AppServiceService} from '../app-service.service'
  
  @Component({
    moduleId: module.id,
  
    selector: 'app-child',
  
    templateUrl: 'child.component.html',
  
    styleUrls: ['child.component.css']
  
  })
  
  export class ChildComponent implements OnInit {
  
    dispaly: string;
  
    constructor(appServiceService: AppServiceService) {
  
      this.dispaly = "Child component binding...";
  
      appServiceService.settter(this.dispaly);
  
    }
  
    ngOnInit() {}
  }
  </code></pre>