Q:

How to get and set / access and modify a global variable between components

I'm new to Angular, currently using Angular 5 Cli with VS Code. I have 2x components (Comp1 & 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. 
What's the best way to access this? 
Example files below:
Comp3.html
<a routerLink="/{{modeName | lowercase}}" class="mode"><span class="icon {{modeName | lowercase}}"></span><span>{{modeName}}</span></a>

Comp3.ts
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;

}

Comp2.ts & Comp1.ts - (these are configured based on Angular Routing whichever view loads it'll set 'Grid' mode or 'List' mode)
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';
}

}

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

A:

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should  use a shared service.
You can try following code snippet.
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class SharedService {
  private messageSource = new BehaviorSubject<string>("list");
  currentMessage = this.messageSource.asObservable();
  constructor() { }
  changeMessage(message: string) {
    this.messageSource.next(message)

  }
}

//Comp1
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {

   message:string;
  constructor(private data: SharedService) {

   }
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
    console.log(this.message);
  }

}

//Comp2
import { Component, OnInit } from '@angular/core';
import {SharedService} from '../shared.service';
@Component({
  selector: 'app-comp2',
  templateUrl: './comp2.component.html',
  styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {

    message:string;
  constructor(private data: SharedService) { }
  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
    console.log(this.message);
  }

}

