Angular 一部をタグ化し、子コンポーネントと親コンポーネントでデータ授受をする。

前提・実現したいこと

先ほどと同じソースになりますが、違う質問をさせてください。
Angularのチュートリアルのリスト表示で、MaterialのPaginateを使用し、表示させています。

実現させたいことは、pagenateの箇所をカスタムタグにしたいです。
つまり、下記を<app-page></app-page>とかにする。

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

困っていること

子コンポーネントを作り、データを渡すようにしています。
あとは、Angularの仕様にのっとり、プロパティバイディング、イベントバイディング、@Input、@Output等を駆使し行えばいいのですが、
手が動きません。
今考えており、慣れへの壁かと思われますが、こうすればできるという例を頂ければ助かります。
どうかご教授のほどよろしくお願い致します。

該当のソースコード

・hero.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import {PageEvent} from '@angular/material/paginator';


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

  heroes = HEROES;

  selectedHero: Hero;

  // MatPaginator Inputs
  length = 100;
  pageSize = 0;
  pageSizeOptions: number[] = [5, 10, 25, 100];

  // MatPaginator Output
  pageEvent: PageEvent;

  setPageSizeOptions(setPageSizeOptionsInput: string) {
    if (setPageSizeOptionsInput) {
      this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
    }
  }

  constructor() {
  }

  ngOnInit() {}

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

}

・hero.component.html

<h2>My Heroes</h2>

<ul class="heroes">
  <div *ngIf="!pageEvent">
    <li *ngFor="let hero of heroes | slice:0:5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
  <div *ngIf="pageEvent">
    <li *ngFor="let hero of heroes | slice:(pageEvent.pageIndex)*5:(pageEvent.pageIndex+1)*5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
</ul>

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator>

<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

試したこと

・hero.component.htmlのpagenate箇所とタグにする

<h2>My Heroes</h2>

<ul class="heroes">
  <div *ngIf="!pageEvent">
    <li *ngFor="let hero of heroes | slice:0:5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
  <div *ngIf="pageEvent">
    <li *ngFor="let hero of heroes | slice:(pageEvent.pageIndex)*5:(pageEvent.pageIndex+1)*5"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </div>
</ul>

<app-page></app-page>

以下のようなコンポーネントを作る。
page.component.ts

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

@Component('
  selector: 'app-page',
  templateUrl: '<mat-paginator [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="pageEvent = $event">
</mat-paginator>'
<div *ngIf="pageEvent">
  <h5>Page Change Event Properties</h5>
  <div>List length: {{pageEvent.length}}</div>
  <div>Page size: {{pageEvent.pageSize}}</div>
  <div>Page index: {{pageEvent.pageIndex}}</div>
</div>
,
  styleUrls: []
})
export class Sample1Component implements OnInit {


  constructor() { }

  ngOnInit() {
  }
}

後、page.component.tsより親コンポーネントにデータを引き渡す方法において、マニュアルで確認中。(止まっている)