Passing value between two components (pages) in Angular 2

Question

I am using Angular 2 (TypeScript)

I have two components (actually they are two pages too). They are NOT parent and child relationship.

I want to pass a value

Answer 1

Thank you MarkM! It works, but it has been difficult for me because I have it all in diferent files and over last angular2 using angular cli... So I explain it here:

First of all: You need to create a file with the class you want to share with other components: data.service.ts and make it "@Injectable":

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

@Injectable()
export class myService {
  public sharedData:string;

  constructor(){
    this.sharedData = "String from myService";
  }

  setData (data) {
    this.sharedData = data;
  }
  getData () {
    return this.sharedData;
  }
}

Make sure you set the created class (myService) on 'providers' only once on the app.module.ts file and import the injectable file: data.service.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { AppContent } from './components/content.component';
import { AppInsertContent } from './components/insert.component';
import { myService } from './services/data.service';

@NgModule({
  declarations: [
    AppComponent,
    AppContent,
    AppInsertContent,
  ],
  imports: [
    BrowserModule,
    routing
  ],
  providers: [appRoutingProviders, myService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wherever you want to use your shared class use the constructor to create an object from the class (this object will be unique for your components, thanks to the @Injectable decorator). Remember to import it on every file you use it!...

In my case this view sets the data of the object with a text input: input.component.ts

import { Component } from '@angular/core';
import { myService } from '../services/data.service';

@Component({
  selector: 'insert-content',
  template: `
   
   SAVE
   Object data: {{SharedData}}

    

      BACK
    
  `
})

export class AppInsertContent {
  SharedData: string;
  constructor (private _myService: myService){
    console.log(this._myService.getData());
  }
}

And in this view I just see the data that has been set on the object: content.component.ts

import { Component } from '@angular/core';
import { myService } from '../services/data.service';

@Component({
  selector: 'app-content',
  template: `
  
 
    {{_myService.getData()}} 
  

  

    INSERT
  
  `
})
export class AppContent {
  constructor (private _myService: myService){
    console.log(this._myService.getData());
  }
}

I hope this info is usefull!