import { Injectable } from '@angular/core';

@Injectable()
export class AppService {
  messages: string[] = [];

  updateMessages(msg: string) {
    this.messages.push(msg);
  }
}

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
import { ChildComponent } from './child.component';
import { IsolatedComponent } from './isolated.component';

@Component({
  selector: 'my-app',
  template: `
  <h1>AppComponent Tree</h1>
  <p>
    AppComponent and ChildComponent consume the same instance of AppService
  </p>
  <child-component></child-component>
  <hr />
  <isolated-component></isolated-component>
  `,
  providers: [AppService],
  directives: [ChildComponent, IsolatedComponent]
})
export class AppComponent implements OnInit {
  messages: string[];

  constructor(private appService: AppService) {
    this.messages = appService.messages;
  }

  ngOnInit() {
    this.addMessage(`AppComponent Initialized`);
  }

  private addMessage(msg: string) {
    this.appService.updateMessages(msg);
  }
}

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'child-component',
  template: `
  <div *ngFor="let message of messages">{{message}}</div>
  `
})
export class ChildComponent implements OnInit {
  messages: string[];

  constructor(private appService: AppService) {
    this.messages = appService.messages;
  }

  ngOnInit() {
    this.addMessage(`ChildComponent Initialized`);
  }

  private addMessage(msg: string) {
    this.appService.updateMessages(msg);
  }
}

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
import { IsolatedChildComponent } from './isolated-child.component';

@Component({
  selector: 'isolated-component',
  template: `
  <h1>Isolated Component Tree</h1>
  <p>
    IsolatedComponent and IsolatedChildComponent consume an
    instance of AppService separate from the AppComponent tree
  </p>
  <isolated-child></isolated-child>
  `,
  providers: [AppService],
  directives: [IsolatedChildComponent]
})
export class IsolatedComponent implements OnInit {
  messages: string[];

  constructor(private appService: AppService) {
    this.messages = appService.messages;
  }

  ngOnInit() {
    this.addMessage(`IsolatedComponent initialized`);
  }

  private addMessage(msg: string) {
    this.appService.updateMessages(msg);
  }
}

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'isolated-child',
  template: `
  <div *ngFor="let message of messages">{{message}}</div>
  `
})
export class IsolatedChildComponent implements OnInit {
  messages: string[];

  constructor(private appService: AppService) {
    this.messages = appService.messages;
  }

  ngOnInit() {
    this.addMessage(`IsolatedChildComponent initialized`);
  }

  private addMessage(msg: string) {
    this.appService.updateMessages(msg);
  }
}