How to pass variable value from one component to another in angular 2

If two child components of the parent "app" component needed to access such a variable, I would have liked to keep all logic related to that variable under the parent component, so "app" in your case.

If for some reason it conflicts with your app design, and you mostly put this variable under left panel components, there are various solutions available to fix this.

The easiest solution I've seen is to implement NgRedux and set it up in your project so you can distribute updates to some state that holds a record of that variable and has easy access to anywhere around it value of . that state.

If you're new to NgRedux and want something less efficient but out of the box, you can do it the Angular way by importing: Output, EventEmitter in the left panel comp, and fire events wherever you want (ngOnInit / when activating the function, example), then import Input in your app component. Naturally, the parent will listen to this event, and when fired will activate a function that will now only update the private variable in the "app" component, like this:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'letf-panel',
    template: ` 
               <div>Left Panel Content</div>
    `
})
export class LeftPanelComponent {
    @Output() timeEvent = new EventEmitter();

    constructor() {}
}

Then for example under NgOnInit (inside the LeftPanelComponent class), emit an event with a time variable:

ngOnInit() {
   this.timeEvent.emit(time)
}

You enter events like this:

import { Component, Input } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'app',
    template: '<div (timeEvent)="getTime()"></div>',
})
export class AppComponent{

  @Input() time:number;
  private timeInApp;

  getTime(timeFromLeftPanel) {
      this.timeInApp = timeFromLeftPanel;
  }
}

Once the variable is included in the app comp, it can be bound to the workmat component like this:

[time]="time"

and in the template:

template: `<leftpanel #src></leftpanel><workmat [time]="time"></workmat>`

Let me know if this helps you