Angular: Getter/Setter - Getter is returning undefined

Question

I'm trying to pass a variable that is set on a component, to the parent component via a getter/setter in a service. The setter is applied correctly, but the getter returns undefined.

The below code was pulled out of another project I work on that does just fine with this code so I'm not sure why it isn't working here.

I simply just need to pass the pageTitle that is set on the child component, pass it to the parent component to display in its HTML.

Parent Component

TS: styleguide.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { StyleguideService } from './styleguide.service';

@Component({
  selector: 'styleguide',
  templateUrl: './styleguide.component.html',
  host: {'class': 'route'},
})
export class StyleguideComponent {

  constructor( private ss: StyleguideService ) {}
}

Relevant HTML: styleguide.component.html

<a [routerLink]="[]" aria-current="page" class="crumbs__link crumbs__link--active" [title]="ss.pageTitle">{{ss.pageTitle}}</a>

Parent Module: styleguide.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { StyleguideService } from './styleguide.service';
import { StyleguideComponent } from './styleguide.component';
import { TemplatesComponent } from './templates/templates.component';
...

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ...
  ],
  declarations: [
    StyleguideComponent,
    TemplatesComponent,
    ...
  ],
  exports: [
    ...
  ],
  providers: [
    StyleguideService
  ]
})
export class StyleguideModule {}

Service: styleguide.service.ts

import { Injectable } from '@angular/core';

@Injectable()   
export class StyleguideService {
  pageTitleS: string;

  get pageTitle(): string {
    console.log('get title: ', this.pageTitleS); // <-- Returns undefined
    return this.pageTitleS;
  }
  set pageTitle(s: string) {
    console.log('set title: ', s);
    this.pageTitleS= s;
  }
}

Child Component: templates.component.ts

import { Component } from '@angular/core';
import { StyleguideService } from '../styleguide.service';

@Component({
  selector: 'templates',
  templateUrl: './templates.component.html',
  host: {'class': 'route__content'}
})
export class TemplatesComponent {
  constructor( private ss: StyleguideService ) {
    this.ss.pageTitle = "Templates";
  }
}

Answer 1

You should implement the Service with Observables. A quick example would be something like this:

import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Injectable} from '@angular/core'

@Injectable() 
export class Service {
  private value: BehaviorSubject<string>; 

  constructor() {
    this.value = <BehaviorSubject<string>>new BehaviorSubject();
  }
  setValue(value=""){
    this.value.next(value);
  }
  getValue() {
    return this.value.asObservable();
  }
}

The Parent Component would subscribe to it like so:

import {Component, OnInit} from '@angular/core'
import { Service } from './service';
@Component({
  selector: 'parent-component',
  template: `
    <div>
      <h2>Value {{value}}</h2>
      <child-component></child-component>
    </div>
  `,
})
export class ParentComponent implements OnInit {
  value:string;
  constructor(private service: Service) {
  }
  ngOnInit(){
    this.service.getValue().subscribe((newValue)=>{
      this.value = newValue;
    })
  }
}

And the Child Component would set the value and also subscribe to it like so:

import {Component, OnInit} from '@angular/core'
import { Service } from './service';
@Component({
  selector: 'child-component',
  template: `
    <div>
      <h2>Child Value {{value}}</h2>
    </div>
  `,
})
export class ChildComponent implements OnInit {
  value:string;
  constructor(private service: Service) {
    this.service.setValue('New Value');
  }
  ngOnInit(){
    this.service.getValue().subscribe((newValue)=>{
      this.value = newValue;
    })

  }
}