title: Typescript child class variables return undefined from parent variables
body: <p>I have tried the solutions and suggestions posted <a href="https://stackoverflow.com/questions/43028462/typescript-parent-class-instance-variable-return-as-undefined">here</a> (probably duplicated) but can figure out what I'm missing.</p>
  
  <p>I have an <code>abstract class</code> called <code>ParentService</code> and its <code>child class</code> <code>ChildService</code> as follows:</p>
  
  <p><code>ParentService</code></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { MyModel} from './mymodel-model.service';
  @Injectable({
    providedIn: 'root'
  })
  export abstract class ParentService {
    constructor() { }
    //the other post suggeted to add 'static' but it doesn´t solve it
    public static word:MyModel = { 
      "AA":"AA",
      "BB":"BB",
    }
  }
  </code></pre>
  
  <p><code>ChildService</code></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { MyModel} from './mymodel-model.service';
  import { ParentService } from './parent.service';
  @Injectable({
    providedIn: 'root'
  })
  export class ChildService extends ParentService {
    word2:MyModel = {
      "AA":"AA2",
      "BB":"BB2",
    };
  }
  </code></pre>
  
  <p>from my <code>html-component</code> I can access the <code>variables</code> defined in <code>Childservice</code> but when trying to read the <code>variables</code> from its <code>ParentService</code> I get <code>undefined</code></p>
  
  <pre><code>{{ child_instance.word2.AA }} // returns 'AA2'
  {{ child_instance.word }} // returns undefined
  {{ child_instance.word.AA }} // returns error due to undefined "word"
  </code></pre>