Use complex type object In another component in angular 2

Question

I'm new to angular 2 and I'm implementing user sign-In page.If entered email already exist Web API returns user data object. Currently i'm writing that object in console. But I need that object use inside userExist.component.ts.

These 'auth.component.ts' and 'userExist.component.ts' are independent controllers

auth.component .ts

export class AuthComponent implements OnInit {

 ( ......)
   
 userRegister() {
   
   ( ......)
    
   this.userService.loginRegisterUser(this.userRegisterModel)
      .subscribe(
      data =>{ 
        console.log(data); // working!!   
        this.router.navigateByUrl('/user-exist');   
      },     
      err => {
        alert(err);
        this.errors = err;
        this.isRegistering = false;
      }
      );
   }
}

userExist.component.ts

export class UserExistComponent implements OnInit {

  userRegisterModel:LoggedUserRegister = new LoggedUserRegister ();

  constructor(private route: ActivatedRoute, private router: Router, private userService: UserService,  private fb: FormBuilder,) {}
  
  ngOnInit() {
    this. userRegisterModel = // I need assign object from auth.component.ts
  }
}

anyone can tell me how should I read object of auth.component.ts inside userExist.component.ts

Sajeetharan · Accepted Answer · 2018-01-13 10:46:40Z

1

You need to use one of the message passing mechanism using shared service/event emitter. In this case since your components are independent, use a shared service.

EXAMPLE

@Injectable()
export class sharedService {
 userRegisterModel:LoggedUserRegister ;
 constructor() {
}
 Initialize() {

}

 saveUser(input:any) {
    this.userRegisterModel = input;
 }

 getUser(){
    return this.userRegisterModel;
 }
}

then inside the AuthComponent

data =>{ 
        this.sharedService.saveUser(data);
        this.router.navigateByUrl('/user-exist');   
}

again if you want the detail in other component use getUser method

edited Jan 13, 2018 at 10:46

answered Jan 13, 2018 at 10:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

isanka thalagala Over a year ago

Yes it worked. It's very easy method to use.this will very helpful to beginners like me :) Thank you #Sajeetharan

Sajeetharan Over a year ago

@isankathalagala any time :)

Collectives™ on Stack Overflow

Use complex type object In another component in angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related