Need Angular 4+ (data transfer to another component)

Question

Problem in data transfer (from one component to another) [enter image description here] There are two components DetectparamComponent DetectorComponent In the DetectorComponent, I get to write data and I need to pass the value of this variable to DetectparamComponent (in fact, I pull the data out of the table and use it in another component)

I just do not know how to make the transfer (due to lack of experience) I thought first through the service (сomp1-> serv-> comp2) didn't work As far as I understand, if you use @input, then all html is dragged, but I need only 1 value from the ts file

Here's a simple example using Subject stackblitz.com/edit/… — Jacopo Sciampi
– Jacopo Sciampi, Commented Dec 12, 2018 at 8:28
but I just need a variable to pass between ts, not dragging html data from one component to another — Alexandr Ivanov
– Alexandr Ivanov, Commented Dec 12, 2018 at 8:41
In your example helloComponent is child to appComponent so you can share data with @input @output decorators. Your updated example: stackblitz.com/edit/… — Shantanu
– Shantanu, Commented Dec 12, 2018 at 9:33

Mostafa Sayed · Accepted Answer · 2018-12-16 14:40:02Z

1

try this

In HTML Of First Component

<a (click)="onSelect(data)">Go to </a>

In FirstComponent

import { Router } from '@angular/router';

export class FirstComponent implements OnInit {
   constructor(private router: Router) {
   }
   onSelect(data) {
      this.router.config.find(r => r.component == SecondComponent).data = data;
      this.router.navigate(["Second Component routing path"]);
   }
}

In Second Component

import { ActivatedRoute } from '@angular/router';

export class SecondComponent implements OnInit {
   SentItem : any;
   constructor(private router: ActivatedRoute) { }
   ngOnInit() {
      this.router.data.subscribe(r=>this.SentItem =r);
  }
}

answered Dec 16, 2018 at 14:40

Mostafa Sayed

2561 silver badge10 bronze badges

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

Comments

Farrukh Shahzad · Accepted Answer · 2018-12-12 09:27:01Z

In your servicename.ts file, you can create a Subject type property as a private and then create another property and make it as observable. Here's an example

servicename.ts

export class servicename { 
    private propertytosend = new Subject<any>();
    propertytosend$ = this.propertytosend.asObservable();
    private data = 'Hello';
    // Method to call from outside the component through service
    // like in any component that is on the same page as the component we are getting
    // data in
    public getData() { 
       this.propertytosend.next(this.data);
    }
}

In the component you want to get the data in you have to write following code in the constructor using the servicename object.

this.servicename.propertytosend$.subscribe(data => {
    this.data = data;
})

Hope this helps

Collectives™ on Stack Overflow

Need Angular 4+ (data transfer to another component)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related