Pass data between parent level components

Question

I have two angular components SignupComponent and SignupSuccessComponent. I want to pass data from the SignupComponent to SignupSuccessComponent, currently i have tried using a shared service with no luck.

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  @ViewChild('signupForm') form: FormData;
  constructor(public router: Router, private userService: UserService, private signupService: SignupService) { }

  onSubmit() {
   //user object is gotten from a network request
   this.router.navigate(['/signup/success']);
   this.signupService.setUser(user);
  }
}

The SignupSuccessComponent

@Component({
          selector: 'app-signup-success',
          templateUrl: './signup-success.component.html',
          styleUrls: ['./signup-success.component.scss']
        })
        export class SignupSuccessComponent implements OnInit {

          public user: User;

          constructor(public router: Router, private signupService: SignupService) { 
          }

          ngOnInit() {
            this.signupService.user$.subscribe(data => {
              this.user = data;
              console.log(this.user);
            })
          }
        }

This is the shared service

@Injectable()
export class SignupService {

    private user = new Subject<User>();

    user$ = this.user.asObservable();

    setUser(data: User) {
        this.user.next(data);
    }
}

It seem as though the shared service never gets any data in SignupSuccessComponent

Where is the shared service being provided? Are you sure that the same shared service instance is inject in both components? — Robby Cornelissen, Jul 27 '17 at 05:25
@RobbyCornelissen The shared service is being provided in a SignupModule — MrFoh, Jul 27 '17 at 05:28
@MaKobi the SignupSuccessComponent doesn't get the data i'm trying to pass — MrFoh, Jul 27 '17 at 05:44
Have you checked whether shared service is getting the data or not ? — The Hungry Dictator, Jul 27 '17 at 06:03

score 2 · Answer 1 · answered Jul 27 '17 at 06:08

I decided to use local storage to pass data between the components.

import { Injectable } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';

    @Injectable()
    export class SignupService {

        constructor(private localStorageService: LocalStorageService) {}

        setUser(data) {
            this.localStorageService.set('user.new', data);
        }

        getUser() {
            return this.localStorageService.get('user.new');
        }

        clearUser() {
            this.localStorageService.remove('user.new');
        }
    }

I can call setUser in the SignupComponent and get the data using getUser in the ngOnInit method of SignupSuccessComponent

It's a bad idea to use local storage to pass data. What if the user disabled the local storage? — Vega, Aug 11 '17 at 16:31

score 0 · Answer 2 · answered Jul 27 '17 at 06:17

In SignupSuccessComponent you receive data in ngOnInit which is executed only once at the beginning of the component lifecycle. So when the submit button fires onSubmit(), it doesn't change anything in SignupSuccessComponent. To correct, you need to add an @Input with a setter this way:

@Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }

  get name(): string { return this._name; }

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

score 0 · Answer 3 · answered Jul 27 '17 at 08:08

You can use getUser() method to just return the user object. I have create a demo for same: github link:https://github.com/sachinkasana/sharedServiceDemo

**//SignupService

@Injectable()
export class SignupService {
   // private user = new Subject<User>();
   //I am taking this simple string type for your reference
 private user = "";
   // user$ = this.user.asObservable();
    setUser(data: string) {
        this.user=data;
    }
    getUser(){
        return this.user;
    }
}

**

//SignupComponentComponent

export class SignupComponentComponent  {
    @ViewChild('signupForm') form: FormData;
  constructor(public router: Router, private signupService: SignupService) { }

  onSubmit() {
   //user object is gotten from a network request
   this.router.navigate(['/signup/success']);
   this.signupService.setUser('Test User From signup');
  }
}

//SignupSuccessComponentComponent

export class SignupSuccessComponentComponent implements OnInit {
   public user: string;
    constructor(public router: Router, private signupService: SignupService){}
          ngOnInit() {
          this.user= this.signupService.getUser()
              console.log(this.user);
          }
}

score 0 · Answer 4 · answered Jul 27 '17 at 08:17

0

I posted a solution without using service, but using parent child propagation. https://stackoverflow.com/a/45274521/1033326

answered Jul 27 '17 at 08:17

sancelot

1,905
12
31

Pass data between parent level components

4 Answers4