How to use a variable from a component in another in Angular2

Question

I was wondering if it is possible to use variable values from one component into another one without having to use the template of the first one, just need the value of the

Answer 1

I was developing a thing and I faced the same challenge. My approach.

I had two different components and a service.

loginComponent, headerCompnent and a loginauth service.

    validateUser(name,pass){

   this.loginStatus = this.loginauth.validateUser(name,pass);

   if(this.loginStatus) this.route.navigate(['/welcome']);
   else this.route.navigate(['/login']);

  }

image from LoginComponent

I wanted to use "loginStatus" in headerComponent.

this.loginauth.validateUser(name,pass); loginauth was the service and validateUser(...) method inside it.

So I created a static variable inside the service and inject that service into both components and by injecting the same service in headerComponent I was able to retrieve the value of that static variable.

In service, create and initialize it as per your requirement.

static loginFlag = false;

loginAuth service img

In header component.

Import that service and access that static variable with class name.

 LoginAuthService.loginFlag

headerComponent img