Angular 2 - send textarea value to a shared component

Question

I have a textarea in the first page and when i go to next page i need this value to show in a notepad component that is shared in the next pages but at the same time i need that when i write new info in the shared component first and new information can be saved and displayed. i need to use angular2 and i cant use any stuff from github.enter image description here

How are they related the firs and second component. The are children to some parent component? — onetwo12, Jul 18 '17 at 11:13
that first component is part of the form in that page, the form is a a component but not shared, they arent children to other page. my main problem is get the info from the notepad and pass to next pages. — Marcella Moreira, Jul 18 '17 at 11:17
Try with defining property `someProp`and then assign that property to both of them with `[(ngModel)]="someProp"`. You add it like this `` — onetwo12, Jul 18 '17 at 11:20
you can try `BehaviourSubject` see this [link](https://stackoverflow.com/questions/36404541/behavioursubject-in-angular2-how-it-works-and-how-to-use-it) , if it helps — Avnesh Shakya, Jul 18 '17 at 11:25

score 1 · Accepted Answer · answered Jul 18 '17 at 12:08

Since its not a parent-child relation, you can use shared service and pass the textarea value using setter and getter.

Example:

form.component.ts:

@Component({
  selector: 'form1-component',
  template: `
    <h3>Form 1</h3>
        <textarea [(ngModel)]="input"></textarea>
        <button (click)="save(input)">Save</button>
  `,
})
export class Form1 {
  input: any;

  constructor(private appState: AppState){

  }

  save(val){
    this.appState.setData(val);
  }
}

shared.service.ts:

@Injectable()
export class AppState {
  public formData;

  setData(value){
    this.formData = value;
  }

  getData(){
    return this.formData;
  }
}

other.component.ts:

@Component({
  selector: 'summary',
  template: `
    <h3>Summary From Form 1</h3>
    <div>{{data}}</div>
  `,
})
export class Summary {
  data: any;

  constructor(private appState: AppState){
    this.data = this.appState.getData();
  }
}

Plunker demo

If it resolved your problem, please mark it as 'Accepted' :) — Nehal, Jul 18 '17 at 15:13

score 0 · Answer 2 · answered Jul 18 '17 at 11:32

0

You can use @Input decorator if there is parent child relationship between components. Else make use of Services or BehaviourSubject. These are the following approaches based on priority:

Using Services(Most Recommended).
Using Behavior Subjects from RxJS library.
Use Redux for state management.
Using browser storage(session/local) but least recommended as prone to data security.

answered Jul 18 '17 at 11:32

Peter

10,492
21
82
132

any chance to make a plunker example using services? – Marcella Moreira Jul 18 '17 at 11:44
You can yourself create a service and set the variable in setter function. Other components which use the same service can get the value of a variable using getter function. – Peter Jul 18 '17 at 17:58

JGFMK · Answer 3 · 2017-07-18T12:26:05.490

Use cookies with ReactiveFormsModules, only saving to cookies when you have valid data.

npm install cookies-js --save

app-module.ts

...
imports: [ReactiveFormsModule]
...

MyComponent.html

...
<form [formGroup]="form">
  <input name="a" formControlName="b">
</form>
...

MyComponent.ts

import {Component, OnInit} from '@angular/core';
import {FormGroup,FormBuilder,Validators} from '@angular/forms';
import * as Cookies from 'cookies-js';

export class MyComponent implements OnInit{

  private static readonly COOKIE_DATA = 'data_to_save';

  form : FormGroup;

  constructor(private fb: FormBuilder) {

     this.form.fb.group({
     b: ['' Validators.required] 
     });
  }
  ngOnInit() {
    const data = Cookies.get(MyComponent.COOKIE_DATA);
    if (data) {
      this.form.setValue(JSON.parse(data));
    }
    this.form.valueChanges
     .filter(() => this.form.valid)
     .do(validData => Cookies.set(COOKIE_DATA, JSON.stringify(validData)
     .subscribe()
  }
}

Angular 2 - send textarea value to a shared component

3 Answers3

Linked