angular 4 pass data between components without input\output

Question

I'm trying to pass data between components in angular 4. I don't want to use input\output. in Homecomponent I want to push data into service and in page2 component I want to get data from service. I just looked on way with observable and subject and I tried to implement it without success.

HomeComponent

    import { ClientService } from './../clinet-service.service';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'page-home',
  template: 'pages/home/home.html',
})
export class HomeComponent implements OnInit {

  clients = ['john', 'jane']
  clientFound = false

  // constructor(private navController: NavController) { }
  constructor(private clientService: ClientService) {

  }

  openClient(client) {
  }
  ngOnInit() {
    this.clientService.subject.next([
      { name: 'Harold', age: 35 }
    ]
    );

}

}

page2component

import { ClientService } from './../clinet-service.service';
import { Component } from '@angular/core';
@Component({
  selector: 'page-2',
  template: '{{clients}}'
})
export class Page2Component {
  client:any;

  constructor(  private clientService: ClientService) {

  }

  ngOnInit(){
    debugger
    let clients = this.clientService.observable.subscribe(clients => console.log(clients));
  }
}

clientService

import { Injectable, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from "rxjs/Observable";

@Injectable()

export class ClientService {
  subject: Subject<any> = new Subject<any>();
  observable: Observable<any> = this.subject.asObservable();


}

actually I didn't like the way of implementation because i try to make simple thing such push data to service and get it in other components but I can't do that.

What happens when you remove the debugger line from Page2Component in ngOnInit method? — Kyrsberg
– Kyrsberg, Commented Sep 7, 2017 at 9:25

score 4 · Accepted Answer · 2017-09-07 09:27:04Z

4

You can't do that because you make it unnecessary complicated. Here is how you should do :

HomeComponent

ngOnInit() {
    this.clientService.subject.next([{
      {name: 'Harold', age: 35 },
      {name: 'Kumar', age: 40 },
    }]);
}

page2Component

ngOnInit(){
  let clients = this.clientService.observable.subscribe(clients => console.log(clients));
}

service

export class ClientService {

  subject: Subject<any> = new Subject<any>();
  observable: Observable<any> = this.subject.asObservable();

  constructor() {}
}

edited Sep 7, 2017 at 9:27

answered Sep 7, 2017 at 9:05

user4676340

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

17 Comments

Manspof Over a year ago

I tried to do that in parent and child project and the child load before the parent and it not works so I decided to do that with observable

user4676340 Over a year ago

Well if you use an API after that (I guess that your service is mocked), you won't have this problem, since you won't set your clients, but just get them. To check that, you can set the clients in the service directly where you declare the clients variable.

Manspof Over a year ago

it works but it's not what I want to do. I want from parent component to get data and then to save in service and share with all childs.. all childs use get function to get data in their components

user4676340 Over a year ago

Well for that, unmock your service and edit your post. Then, we'll work on that. Because if you don't, we'll use concepts that aren't related to a real API service.

Manspof Over a year ago

what do you mean @trichetriche?

|

Kyrsberg · Accepted Answer · 2017-09-07 09:59:02Z

1

Your HomeComponent decorator is broken. You need to use templateUrl instead of template when you are using external template file.

Wrong

@Component({
  selector: 'page-home',
  template: 'pages/home/home.html',
})

Correct

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html',
})

https://angular.io/api/core/Component

answered Sep 7, 2017 at 9:59

Kyrsberg

4404 silver badges11 bronze badges

1 Comment

Manspof Over a year ago

i did it in purpose just write a text with the url

Dhaanappagouda Patil · Accepted Answer · 2018-04-25 09:57:24Z

You can pass the data between any of the componenrs using rxjs subject. Create new rxjs subject in your service like this

import { Subject } from 'rxjs/Subject';
@Injectable()
export class MyService {

    myNewSubject = new Subject<any>();

    informDataChanges(passyourobject){
      this.myNewSubject.next(passyourobject);
  }

}

When change happens in your component or you want to pass data to another component simply call this service function from your component and pass data as parameter to this function. You can do that with something like this

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-some',
      templateUrl: './some.component.html',
      styleUrls: ['./some.component.css']
    })
    export class SomeComponent implements OnInit {

      constructor( private myService: MyService) { }

      someFunction(){
        this.myService.informLogout('somedata');//Passing data to service here
      }

  ngOnInit() {

  }

}

Now all you need to do is subscribe to that data in another component. IMPORTANT subject keeps on watches any changes to it, and data will be continuous stream and it will be automatically subscribed. So it is best to subscribe to the subject in the constructor, and changes will be immediately reflected in that component.

You do it with some thing like this

import { Component, OnInit } from '@angular/core';

        @Component({
          selector: 'app-another',
          templateUrl: './another.component.html',
          styleUrls: ['./another.component.css']
        })
        export class AnotherComponent implements OnInit {

          constructor( private myService: MyService) {
            this.myService.myNewSubject.subscribe(data=>{
             console.log(data);
       }) 
}

This way you can pass data between any number of components and any number of components can use the same subject.

Collectives™ on Stack Overflow

angular 4 pass data between components without input\output

3 Answers 3

17 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

17 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related