Angularでボタンを押すことで表示されている値を増減させたい

Question

前提・実現したいこと

当方Angularの初心者です。
ボタンを押すことでウインドウ内の数値を増減させたいのですがうまくいかずに困っております。

また、子コンポーネントから親コンポーネントにデータを渡すときに
親コンポーネント内で設定されているmaxPage(今回は2とする)を超えない範囲で値を増減させたいです。今回の例でいうと
・フッター内の表示数値を[1,2]で変動させたい
・フッター内の表示数値が1のときに戻るボタンを押しても何も起こらないようにする
・フッター内の表示数値が2のときに進むボタンを押しても何も起こらないようにする
を条件に加えたいと考えています。

発生している問題・エラーメッセージ

子コンポーネント
child.component.ts

import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  Output,
  SimpleChanges,
} from '@angular/core';

@Component({
  //省略
})

export class ChildComponent implements OnInit {
  /**1ページ目へ戻る */
  @Output() goFirst = new EventEmitter();

  /** 前ページへ戻る*/
  @Output() goPrevious = new EventEmitter();

  /** 次ページへ進む */
  @Output() goNext = new EventEmitter();

  /** 最終ページへ進む */
  @Output() goLast = new EventEmitter();

  /** 現在ページ */
  @Input() nowPage: number = 1;
  @Output() nowPageChange = new EventEmitter<number>();

  inputPage: number = 1;

  /** 最大ページ */
  @Input() maxPage: number = 100;

  constructor() {}

  ngOnInit(): void {
    this.inputPage = this.currentPage;
  }

//ページが変更されるときに実行する
pageNumberChange() {
    if (入力された値が数字ではない) {
    //省略
    } else {
      //メインの処理
      this.nowPage = this.inputPage;
      this.nowPageChange.emit(this.nowPage);
    }
  }

child.component.html

<mat-card class="paging-area">
  <button mat-icon-button (click)="goFirst.emit()">
    <mat-icon>first_page</mat-icon>
  </button>
  <button mat-icon-button (click)="goPrevious.emit()">
    <mat-icon>navigate_before</mat-icon>
  </button>
  <input
    type="text"
    mat-input
    style=""
    [(ngModel)]="inputPage"
    (change)="pageNumberChange()"
  />
  <span>of</span>
  <span>{{ maxPage }}</span>
  <button mat-icon-button (click)="goNext.emit()">
    <mat-icon>navigate_next</mat-icon>
  </button>
  <button mat-icon-button (click)="goLast.emit()">
    <mat-icon>last_page</mat-icon>
  </button>
</mat-card>

このhtmlで表示されるものが以下になります（表の中身は例）

フッター部分の左右ボタンを押すことでウインドウ内の数値が変化するようにしているつもりなのですがうまくいっていない状況です（最右の 最終ページへ進むボタン や右から2番目の 1ページ先へ進む ボタンを押してもウインドウ内の数値が変更されない）

右部(左部)にあるボタンを押すことでウインドウ内の数値が下記画像のように増加(減少)するようにしたいです

該当のソースコード

親コンポーネント
parent.component.ts

  /**
   *
   * @param value 入力されたページへ移動する
   */
  changePage(value: number) {
    this.currentPage = value;
    this.offset = 30 * (this.currentPage - 1);
    //Ag-gridの更新処理（省略）
    this.chinldComponent.pageNumberChange();
    console.log(`move to ${value}`);
  }

  /**
   * 検索結果の1ページ目へ移動する
   */
  first() {
    this.currentPage = 1;
    //Ag-gridの更新処理（省略）
    this.chinldPaginationComponent.pageNumberChange();
    console.log('first: OK.');
  }

  /**
   * 検索結果の表示を1ページ前へ戻る
   */
  prev() {
      this.currentPage -= 1;
      //Ag-gridの更新処理（省略）
      this.chinldPaginationComponent.pageNumberChange();
      console.log('prev: OK.');
    } else console.log('prev: NG. currentPage = ' + this.currentPage);
  }

  /**
   * 検索結果の表示を1ページ次へ進む
   */
  next() {
      this.currentPage += 1;
      //Ag-gridの更新処理（省略）
      this.chinldPaginationComponent.pageNumberChange();
    } else console.log('next: NG. currentPage = ' + this.currentPage);
  }

  /**
   * 検索結果の表示を最終ページまで移動する
   * this.maxPage: 今回は値「2」とする
   */
  last() {
    if (this.currentPage != this.maxPage) {
      this.currentPage = this.maxPage;
      //Ag-gridの更新処理（省略）
      this.chinldPaginationComponent.pageNumberChange();
      console.log('last: OK.');
    } else
      console.log(
        'last: NG. currentPage = ' +
          this.currentPage +
          ' maxPage = ' +
          this.maxPage
      );
  }

parent.component.html

<ag-grid-angular
  #sampleGrid
  [columnDefs]="columnDefs"
  class="ag-theme-alpine"
  style="width: 100%; height: calc(100% - 70px - 50px)"
  [rowData]="rowData"
  [defaultColDef]="defaultColDef"
></ag-grid-angular>

<grid-pagination
  [currentPage]="currentPage"
  [maxPage]="maxPage"
  (toFirst)="first()"
  (toPrevious)="prev()"
  (toNext)="next()"
  (toLast)="last()"
  (currentPageChange)="changePage($event)"
>
</grid-pagination>

試したこと

一通りAngularの日本語ドキュメンテーション(https://angular.jp/guide/component-overview)やブログ記事(https://www.yoheim.net/blog.php?q=20180311)を確認したのですがやりたいことが書いてある記事を見つけられませんでした

補足情報（FW/ツールのバージョンなど）

Package Version

---

@angular-devkit/architect 0.1202.4

@angular-devkit/build-angular 12.2.4

@angular-devkit/core 12.2.4

@angular-devkit/schematics 12.2.4

@schematics/angular 12.2.4

rxjs 7.3.0

typescript 4.2.4

Answer 1

ウィンドウ内の数値は子コンポーネントのフィールド変数 inputPage と双方向バインディングされています。
親コンポーネントから渡される currentPage が変わったら子コンポーネントの inputPage に反映したいということでしょうか。
であれば、親から渡される値が変わったときに実行されるライフサイクルフック ngOnChanges() を使う必要があります。

子コンポーネントに以下のコードを追加してください。

// 親から受け取るフィールド変数が足りてないです
@Input() currentPage: number = 1;

ngOnChanges() {
  this.inputPage = this.currentPage;
}

やりたいことは↑のコードでできると思いますが、そもそも入力値が親から子へ行ったり来たりする設計があんまりよくないと思います。
入力欄が子コンポーネントのものならば、現在ページは子から親への一方通行でいいんじゃないかと思うわけです。クリックイベントを emit する必要もなくなります。

例えば

child.component

export class ChildComponent implements OnInit {

  @Input() max: number;
  @Output() onPageChange = new EventEmitter<number>();

  inputPage: number = 1;
  private currentPage: number = 1;

  ngOnInit() {
  }

  toFirst() {
    this.currentPage = 1;
    this.inputPage = 1;
    this.onPageChange.emit(this.currentPage);
  }

  toPrevious() {
    this.currentPage -= 1;
    this.inputPage = this.currentPage;
    this.onPageChange.emit(this.currentPage);
  }

  toNext() {
    this.currentPage += 1;
    this.inputPage = this.currentPage;
    this.onPageChange.emit(this.currentPage);
  }

  toLast() {
    this.currentPage = this.max;
    this.inputPage = this.currentPage;
    this.onPageChange.emit(this.currentPage);
  }

  pageNumberChange() {
    if (入力値が数字か？) {
      // 数字じゃないとき
      return;
    }
    this.currentPage = this.inputPage;
    this.onPageChange.emit(this.currentPage);
  }

}
  

みたいにするとか。
親コンポーネントは onPageChange イベントだけ拾えばよくなります。
この例も入力値が max を超えていたらどうするのか？とかいろいろ省略しています。もうちょっと細かい実装は必要と思いますが、設計例として。