Pass data between two independent components

Question

I want to pass data between two independent components.

For example:

I have first component with input text and submit button. Second component with input box
When user enters data in text box of first component and clicks submit he will be routed to second component where data entered in input textbox of first component should come inside textbox of second component.
I tried using @Input and @Output but this is for parent child hierarchy.
In my case I have 2 separated components where user routes from one page to another were whole view changes
I heard to make use of service but was not able to find proper example or documentation online.

angular.io/docs/ts/latest/cookbook/…, angular.io/docs/ts/latest/guide/router.html#!#reuse — eko
You can use subject in the child component and then subscribe to it in the parent component. Link — Tunisiano32

monica monica · Accepted Answer · 2017-05-17T07:04:37

You can make a common service, I name it as store. For example, you can make a forms store forms.store.ts. This store will be a service

@Injectable()
export class FormsStore {
  inputText : string = '';
  constructor(){
       //Code here
  }
  //Other Functions 
}

In form.component.ts :

 @Component({
    selector: 'form',
    encapsulation: ViewEncapsulation.None,
    template: require('./form.component.html')
})

export class FormComponent{

  constructor(private store: FormsStore) {
  }

  onFormSubmit(value){
   this.store.inputText = value;
  }

}

In form.component.html :

<input (keydown.enter)="onFormSubmit(input.value)" #input>

Now in other components, you can again create an instance of the store and refer to 'inputText' value as store.inputText and use it.

Pass data between two independent components

1 Answers