How to send data from one component to another component in Angular2 through service

Question

I have two component at same label.I want to pass data from one component to another component.I am able to set data to service.But get from service is not working for me.I want to set data from login.component.ts and get data from managerdashboard.component.ts.How can I fix the issue.I am able to set data to service but I am not getting data from service.Please Help me.

sso.service.ts

import { Injectable } from '@angular/core';

export interface User {
    userId:number;
    aemUserId:string;
    role: string;
    authorization: string;
    userName: string;
}

@Injectable()
export class SsoService {

    public user:User;
    public checkedDatas:Array<any> = [];

    setUser( user ) {
        debugger;
        this.user = user;
        console.log('setUser : ',this.user);
    }

    getUser() {
        console.log('getUser : ',this.user);
        return this.user;
    }

    isLoggedIn() {
        return this.user && this.user.userName;
    }
}

app.router.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes,RouterModule, CanActivate} from '@angular/router';

import {AppComponent} from './app.component';
import { LoginComponent } from './login/login.component';

import { ManagerdashboardComponent } from './managerdashboard/managerdashboard.component';

export const router:Routes = [
    { path:'', redirectTo:'login', pathMatch:'full' },
    { path: 'login', component: LoginComponent },
       { 
        path: 'aem', 
        component: AemHomeComponent, 

        children: [
            { path:'manager',component:ManagerdashboardComponent },

    ] },
    // { path: '**', component: NotFoundComponent}

];

export const routes:ModuleWithProviders = RouterModule.forRoot(router);

login.component.ts

getSSO( ssoid ){
        console.log('getSSO new : ',ssoid);
        this.authGuard.getAuth(ssoid)
            .subscribe( resp => {
                console.log("getSSO response",resp);
                here I am setting data to service
                this.authService.setUser(resp);
                console.log("14-08-2017",this.authService.getUser() )
                this.router.navigate(
                    ['aem', resp.role.toLowerCase()],
                    { queryParams: { role:resp.role,sso_id:ssoid,auditorName:resp.userName}}
                );
            })

    }

managerdashboard.component.ts

 ngAfterViewInit(){
      //Here I am getting data from service.
          console.log("THIS IS MOHIT TRIPATHI",this.ssoservice.getUser());
        }

do you get any console error ? add your constructor code for this file: `managerdashboard.component.ts` — FAISAL, Aug 14 '17 at 10:16

Pardeep Jain · Answer 1 · 2017-08-14T10:06:21.840

but I am not getting data from service

This is because both the component (Login and managerdashboard) gets load before you set the data in the service file, once you set the data in the service from login component and you will redirect to dashboard component but this compoenent is already loaded at the time of loading your app so changes will not trigger there untill you will refresh your app.

Alternate

why not you are using @input and @output ? if possible you use input and output becasue this is the standerd way of passing data between components.
if you want to use same method you are using you have to use observable and subscribe to listen changes without refreshing the page. you can read out this answer here
- How do i send data from component A to component B Angular 2

score 0 · Answer 2 · answered Aug 14 '17 at 10:13

hi your get statement in the service doesn't have return type.

getUser(): User {
        console.log('getUser : ',this.user);
        return this.user;
    }

you are setting the data using this.authService.setUser(resp); but getting the data using this.ssoservice.getUser() check if this is the mistake.

you are getting the data in ngAfterViewInit you should be getting the data. try ngOnchange by declaring the @input() variable in the destination component. @input() can be used to make use of ngOnChanges lifecycle in any component.

How to send data from one component to another component in Angular2 through service

2 Answers2