Angular2: call method or variable from other component

Question

I have 3 components. PageMenu , LoginSession and LoginForm . In PageMenu I want to have access to variable from LoginSession , then when I have it I can maintain behaviour of LoginForm which is also imported to PageMenu

PageMenu:

import {Component} from 'angular2/core';
import {LoginSession} from 'app/widgets/login-session/login-session';
import {LoginForm} from 'app/widgets/login-form/login-form';

@Component({
    selector: 'page-menu',
    templateUrl: 'app/widgets/page-menu/page-menu.html',
    directives: [ROUTER_DIRECTIVES, LoginSession, LoginForm]
})

export class PageMenu {

    loginFormVisible:boolean;

    constructor(private _router:Router) {
        this.loginFormVisible = false;
    }

    onClickNavbar(page) {
        this._router.navigate([page]);
    }

    triggerLoginForm() {
        this.loginFormVisible = LoginSession.loginFormVisibility;
    }
}

LoginSession:

import {Component} from 'angular2/core';

@Component({
    templateUrl: 'app/widgets/login-session/view/login-session.html',
    selector: 'login-session'
})
export class LoginSession {
    state:string;
    message:string;
    loginFormVisibility:boolean;

    constructor() {
        this.state = 'guest';
        this.message = 'Zaloguj się';
    }

    onClick() {
        switch (this.state) {
            case 'guest':
            {
                this.triggerLoginForm();
                break;
            }
        }
    }

    triggerLoginForm() {
        this.loginFormVisibility = !this.loginFormVisibility;
    }
}

LoginForm:

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder, Validators, ControlGroup, Control, NgClass} from 'angular2/common';
import {Output} from "angular2/core";

@Component({
    templateUrl: 'app/widgets/login-form/view/login-form.html',
    selector: 'login-form',
    directives: [FORM_DIRECTIVES]
})
export class LoginForm {
    state:string;
    message:string;


    loginForm:ControlGroup;
    login:Control = new Control("", Validators.required);
    password:Control = new Control("", Validators.required);


    constructor(formBuilder:FormBuilder) {
        this.loginForm = formBuilder.group({
            'login': this.login,
            'password': this.password,
        });
        console.log('LoginFORM!');
    }

    onSubmit() {
        document.cookie = "sessionId=123456789";
    }
}

Answer 1

Use a shared service to communicate and share between components

export class LoginService {
  public loginChanged: EventEmitter<bool> = new EventEmitter<bool>();
}  

export class PageMenu {

  loginFormVisible:boolean;

  constructor(private _router:Router, private _loginService:LoginService) {
    this.loginFormVisible = false;
    this._loginService.loginChanged.subscribe(value => {this.loginFormVisible = !value;})
  }

  ...

}

The LoginForm can access the value the same way.

export class LoginSession {
  state:string;
  message:string;
  loginFormVisibility:boolean;

  constructor(private _loginService:LoginService) {
    this.state = 'guest';
    this.message = 'Zaloguj się';
  }

  onClick() {
    switch (this.state) {
      case 'guest':
      {
        this.triggerLoginForm();
        break;
      }
    }
  }

  triggerLoginForm() {
    this.loginFormVisibility = !this.loginFormVisibility;
    this._loginService.loginChanged.next(this.loginFormVisibility);
  }
}

Register it only in bootstrap() to get one application-wide instance:

bootstrap(AppComponent, [LoginService])

See also Global Events in Angular 2