Angular 2 Simple Global Variable Service Example

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2 Simple Global Variable Service Example</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <!-- Polyfill(s) for older browsers -->
  <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
  <script src="https://unpkg.com/systemjs@0.19.40/dist/system.src.js"></script>

  <!-- 2. Configure SystemJS -->
  <script src="systemjs.config.js"></script>
  <script>
    System.import('app').catch(function(err) {
      console.error(err);
    });
  </script>
</head>

<!-- 3. Display the application -->
<body>
  <app-root>Loading the Angular 2 Simple Global Variable Service Example ...</app-root>
</body>
</html>

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

import { SimpleGlobal } from 'ng2-simple-global';

@Component({
	selector: 'app-root',
	templateUrl: './app/app.component.html'
})
export class AppComponent implements OnInit {
	title = 'Angular2 Simple Global Variable Service';

	constructor(private sg: SimpleGlobal) { }

	ngOnInit() {
		this.sg['placeholder'] = 'This is a global variable';
	}
}

<p>
  ng2-simple-global is available in
  <a href="https://www.npmjs.com/package/ng2-simple-global">npm</a> and
  <a href="https://github.com/J-Siu/ng2-simple-global">github</a>. This example is available in
  <a href="https://github.com/J-Siu/ng2-simple-global-example">github</a>.
</p>
<div style="border: 1px solid;margin:5px;padding:5px">
  <h3>{{title}}</h3>
  <p>This is example for <a href="https://github.com/J-Siu/ng2-simple-global">ng2-simple-global</a>, a simple global variable service for Angular 2.
  </p>
  <p>Type in any of the following text box!</p>
  <div style="border: 1px solid;margin:5px;padding:5px">
    <p>Component app</p>
    <input type="text" [(ngModel)]="sg.gv" placeholder="{{sg.placeholder}}">
  </div>
  <div style="border: 1px solid;margin:5px;padding:5px">
    <app-com1></app-com1>
  </div>
  <div style="border: 1px solid;margin:5px;padding:5px">
    <app-com2></app-com2>
  </div>
</div>

(function(global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    paths: {
      // paths serve as alias
      'npm:': 'https://unpkg.com/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
      'typescript': 'npm:typescript@2.0.2/lib/typescript.js',

      'node-uuid': 'https://npmcdn.com/node-uuid@1.4.7/uuid.js',
      'ng2-simple-global': 'https://npmcdn.com/ng2-simple-global/lib/simple-global.js'

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      '.': {
        defaultExtension: 'ts'
      },
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {MaterialModule} from '@angular/material';
import { FormsModule } from '@angular/forms';

import { Com1Component } from './com1.component';
import { Com2Component } from './com2.component';

import { SimpleGlobal } from 'ng2-simple-global';

@NgModule({
	declarations: [
		AppComponent,
		Com1Component,
		Com2Component
	],
	imports: [
		BrowserModule,
		FormsModule
	],
	providers: [SimpleGlobal],
	bootstrap: [AppComponent]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

import { Component, OnInit } from '@angular/core';
import { SimpleGlobal } from 'ng2-simple-global';

@Component({
	selector: 'app-com1',
	templateUrl: './app/com1.component.html'
})
export class Com1Component implements OnInit {

	constructor(private sg: SimpleGlobal) { }
	ngOnInit() {
	}

}

import { Component, OnInit } from '@angular/core';
import { SimpleGlobal } from 'ng2-simple-global';

@Component({
	selector: 'app-com2',
	templateUrl: './app/com2.component.html'
})
export class Com2Component implements OnInit {

	constructor(private sg: SimpleGlobal) { }
	ngOnInit() {
	}

}

<p>
	Component com2
</p>
<input type="text" [(ngModel)]="sg.gv" placeholder="{{sg.placeholder}}">

<p>
	Component com1
</p>
<input type="text" [(ngModel)]="sg.gv" placeholder="{{sg.placeholder}}">

# ng2-simple-global-example

## This is example for [ng2-simple-global](https://github.com/J-Siu/ng2-simple-global), a simple global variable service for Angular 2.

  ng2-simple-global is available in
  [npm](https://www.npmjs.com/package/ng2-simple-global) and
  [github](https://github.com/J-Siu/ng2-simple-global).
  This example is available in
  [github](github.com/J-Siu/ng2-simple-global-example).