title: How to get and set / access and modify a global variable between components
body: <p>I'm new to Angular, currently using Angular 5 Cli with VS Code. I have 2x components (Comp1 &amp; Comp2) that need to access the same variable which is ultimately a string. This variable is rendered in the 3rd Component's (Comp 3) View/HTML template. </p>
  
  <p>What's the best way to access this? 
  Example files below:</p>
  
  <p>Comp3.html</p>
  
  <pre><code>&lt;a routerLink="/{{modeName | lowercase}}" class="mode"&gt;&lt;span class="icon {{modeName | lowercase}}"&gt;&lt;/span&gt;&lt;span&gt;{{modeName}}&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Comp3.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { LowerCasePipe } from '@angular/common';
  
  @Component({
  selector: 'pm-nav-button',
  templateUrl: './comp3.component.html'
  })
  
  export class Comp3 {
  
  constructor() {}
  
  modeName: string;
  
  
  }
  </code></pre>
  
  <p>Comp2.ts &amp; Comp1.ts - (these are configured based on Angular Routing whichever view loads it'll set 'Grid' mode or 'List' mode)</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { LowerCasePipe } from '@angular/common';
  import { Comp3 } from './comp3-component';
  
  @Component({
  selector: 'content-two',
  templateUrl: './comp3.component.html'
  })
  
  export class Comp2 implements OnInit {
  
  constructor(private _comp3: Comp3) {}
  
  
  ngOnInit(): void {
      this._Comp3.modeName = 'Grid';
  }
  
  
  
  }
  </code></pre>
  
  <p>However, it all compiles fine with no errors, but I'm not seeing 'Grid' binded to the template's bindings (interpolation). I think I'm setting the the variable after the template has rendered, even though I'm setting it within ngOnInit. I want to be able to access, check and set this variable from other components. How do I do this? Thanks</p>