Angularで外部コンポーネントを使用し、データを渡して処理したい。

Question

前提・実現したいこと

ng-contentを使用し、angularのチュートリアル3のように、
リストをクリックすると下記にリストの詳細を表示するようにする。
https://angular.jp/tutorial/toh-pt3

確認したいこと

リスト表示から、各リストの詳細を表示するにあたり、
ng-contentを使用して詳細箇所を外部コンポーネント化し、詳細を表示しようとしていますが、外部コンポーネントに値を渡すことができかねています。

この辺、あまり分かりやすい情報があるわけでなさそうで、今回参考にしたソースが結構分かりやす
かったのですが、応用ができません。

Angularのチュートリアルのように、子コンポーネントに対し、@Input デコレータを使用すれば
データの受け渡しは可能ですが、ng-contentを使用した場合、同様にデータを渡すにはどうするのでしょうか、そもそもできないのでしょうか？

試したこと、その該当のソースコード

外部コンポーネントから値を取得する方法は、一番下記に記載した所から取得可能のようである。

参考ソースより、外部コンポーネントの値をとりあえず参照するコードをangularのチュートリアル
のソースを参考に強引に盛り込んで見た。

・app.component.html

<h1>{{title}}</h1>
<!-- <app-heroes></app-heroes> -->
<!-- <app-messages></app-messages> -->

<app-heros-test>
  <app-heros-test-detail></app-heros-test-detail>
</app-heros-test>

・heros-test/heros-test.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';


// ngAfterContentChecked を利用するための import
import { AfterContentChecked } from '@angular/core';

// 外部コンテンツの参照を単独で取得するための import
import { ContentChild } from '@angular/core';

// 外部コンテンツを import
import { HerosTestDetailComponent} from '../heros-test-detail/heros-test-detail.component';



@Component({
  selector: 'app-heros-test',
  templateUrl: './heros-test.component.html',
  styleUrls: ['./heros-test.component.css']
})
export class HerosTestComponent implements OnInit {

  selectedHero: Hero;

  heroes: Hero[];

  constructor(private heroService: HeroService, private messageService: MessageService) { }

  ngOnInit() {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add(`HeroService: Selected hero id=${hero.id}`);
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }

  /**
   * 外部コンテンツの参照から値をセットするためのパラメータ
   *
   * @type {String}
   * @memberof ContentParentComponent
   */
  public contentValue: String;

  /**
   * 外部コンテンツの参照
   * テンプレートで指定した外部コンテンツを取得できる
   *
   * @type {ContentChildComponent}
   * @memberof ContentParentComponent
   */
  @ContentChild(HerosTestDetailComponent) contentChild: HerosTestDetailComponent;

  /**
   * 外部コンテンツの変更をフックする
   *
   * @memberof ContentParentComponent
   */
  ngAfterContentChecked() {

    if (this.contentValue !== this.contentChild.inputValue) {
      this.contentValue = this.contentChild.inputValue;
    }
  }


}

・heros-test/heros-test.component.html

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<ng-content></ng-content>
<div>
  <p>外部コンテンツで入力された値が次の行に表示される</p>
  <p>{{contentValue}}</p>
</div>

・heros-test-detail/heros-test-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heros-test-detail',
  templateUrl: './heros-test-detail.component.html',
  styleUrls: ['./heros-test-detail.component.css']
})
export class HerosTestDetailComponent implements OnInit {
  /** 
   * テキストボックスの入力値
   *
   * @type {String}
   * @memberof ContentChildComponent
   */
  public inputValue: String;
  constructor() { }

  ngOnInit(): void {
  }

}

・heros-test-detail/heros-test-detail.component.html

<label for="inputText">入力項目 :</label>
<input id="inputText" name="inputText" type="text" [(ngModel)]="inputValue" />

参考にしたソース

https://qiita.com/ksh-fthr/items/00341b3b12f7048c9575