how to share data between component with @input/@output in angular?

Question

I want to share data between component with use @Input or @output because I'm just need to share in back-end don't need to display

With or without? Make sure that the title and the description match. — Martin Parenteau
– Martin Parenteau, Commented Jan 10, 2020 at 4:34
Does this answer your question? How to pass data between two components in Angular 2 — vighnesh153
– vighnesh153, Commented Jan 10, 2020 at 6:27

Fahad Hassan · Accepted Answer · 2020-01-10 05:30:26Z

1

If you want to pass data between components without @input @output so you can user service.

In data.service.ts you can do like this

sharedData : any;

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

And in your parent.component.ts you can set data like this

constructor(private _dataService : DataService){}

this._dataService.setData(dataToBeShared);

And in your child.component.ts you can get that data like this

constructor(private _dataService : DataService){}

console.log(this._dataService.getData())

answered Jan 10, 2020 at 4:44

Fahad Hassan

8212 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mustafa Kunwa · Accepted Answer · 2020-01-10 04:58:28Z

0

If you want to pass data between components without @input @output so you can use service.

In share.service.ts you can do like this

search: EventEmitter < boolean > = new EventEmitter();
toggle(value:any) {
    this.search.emit(value);
}

Component where you want data:

ngOnInit() {    
  this.service.search.subscribe(value => {
       //some code here
  }
}

Component from where you are sharing data:

submit():void{
  this.service.toggle(somedata);
}

answered Jan 10, 2020 at 4:58

Mustafa Kunwa

8651 gold badge9 silver badges20 bronze badges