@Component({
  selector : 'app-state',
  template: `
  <p>Here's the state: {{state}}</p>
  `
})
export class StateComponent {
  state: string = "My state.";
}

@Component({
  selector : 'app-base',
  template: `
    <div>
      <p>BaseComponent</p>
      <app-state></app-state>
    </div>
    `
})
export class BaseComponent {
  @ViewChild(StateComponent) stateCmp: StateComponent;

  getState(): string {
    return this.stateCmp.state;
  }
}

@Component({
  selector : 'app-inherited',
  template: `
    <app-base></app-base>
    <div>
      <p>InheritedComponent</p>
    </div>
  `
})
export class InheritedComponent extends BaseComponent {
  constructor() {
    super();
  }
}

@Component({
  selector: 'app-root',
  template: `
  <app-inherited></app-inherited>
  <button (click)="onClick()">Get state</button>
  <p>{{ theState }}</p>
  `
})
export class AppComponent {
  @ViewChild(InheritedComponent) cmpRef: InheritedComponent;

  theState: string;

  onClick() {
    this.theState = this.cmpRef.getState();
  }
}