CODEWITHSUNDEEP
angular
Eran Abir
Eran Abir

Reputation: 1097

Angular 2 how to pass data between different components

I have two different components: one is a login component and the other is users component.

In the login component I am authenticating with MakeLogin function and after that getting user details from API and navigating by route to the home page (in the home page the users component is initiated)

The user details that I am getting from the API are saved to an object UserItem. This object needs to be alive in the users component and I cant manage to do that

I would like to know what is the best method to get it work

Thanks !

The Login Component : 

export class LoginComponent implements OnInit{
    token : string;
    loginDetails : LoginItem;
    LoginStatus : boolean;
    error : string;
    private loader = false;
    currentUser : UserItem;

    constructor(private LoginService : LoginService,private router : Router){}

    ngOnInit(){
        this.LoginStatus = this.LoginService.CheckLoginStatus();
        if(this.LoginStatus === true){
            this.router.navigate(['']);
        }
    }

    MakeLogin(Email:string,Password:string) {
        this.error = null;
        this.loader = true;
        this.loginDetails = new LoginItem(Email,Password);
        this.LoginService.PostLogin(this.loginDetails).subscribe(data => {
            if(data === true){
                this.token = localStorage.getItem('id_token');
                this.UsersService.GetUserDetailsFromDB(this.token).subscribe(data =>{
                    this.currentUser = new  UserItem(data.firstName,data.lastName,data.email,data.id);
                    this.router.navigate([''])
                 });
            }
        }, error =>{
            if(error === 401){
                console.log(error);
                this.loader = false;
                this.error = "Username or Password incorrect";
            }
        });
    }
}

Upvotes: 1

Views: 3158

Answers (1)

Huske
Huske

Reputation: 9296

In your Users component you need to have a property defined as @Input() user: UserItem. Also, make sure that you import Input from @angular/core. The HTML view that you use for your users component needs to be able to accept your object of type UserItem in order to be able to show it in the component. For example:

user.component.ts

import { Component, OnInit } from "@angular/core";
import { UserItem } from "../your/location/of/UserItem";

@Component({
   selector: 'user-details',
   templateUrl: 'location/to/your/client/views/user.component.html'
})
export class UserComponent {
    @Input() user: UserItem;
}

In your login component, depending where you want to host user-details, you need to specify something like: <user-details [user]="currentUser" />

The [user] part corresponds to the above @Input() user: UserItem; property definition. The currentUser is what you are getting from the API and what you want to display in the user details.

Update

According to your comment, the best way for you to achieve what you want is to create a service that would be shared between the two components. Because services are instantiated as singletons, your values will be available between the components.

Upvotes: 1

Related Questions