Angular ver21.2.10にてAPIを利用し値を更新しても変更検知が働かず画面が更新されない

Question

実現したいこと

自己研鑽のためECサイトを開発したい。
検索機能を実装したく、検索ボタンを押下することで
フォームに入力されている文字に一致する商品データをAPIで取得し、
結果を検索結果画面に表示したい。

前提

■開発環境
〇フロントサイド
- Angular Ver 21.2.10
〇バックエンド
- SpringBoot Ver 4.0.6
- JDK 21

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

検索結果画面に表示する商品を管理している変数をAPIで取得したデータに更新しても
Angularの変更検知が動作しておらず？画面が更新されない。
コンソールを見るとAPIからデータは取得できているように見える。

1つ気になる動作があり、上記の検索結果が表示されていないページで再度検索フォームをクリックした後にページの余白部分をクリックすると検索結果に取得したデータが表示される。

該当のソースコード

■検索結果画面のtsファイル

■検索結果画面のhtmlファイル

■app.config.ts

■app.route.ts

■サービス

試したこと

■zone-less設定確認
chatGPTに質問した結果、Angular 21ではzone-less 設定なるものになっているらしく、
変更検知を行わないとのこと。。
ただ、app.config.tsに「provideZonelessChangeDetection()」がない場合はzone-less設定になっていないため変更検知がされるらしいが、私の環境だと検知されていないようにみえる。

■NgZone設定
chatGPTにNgZone内でAPIを叩けば強制的にAngularが検知させることができる。と回答があったため提示されたコード通りに実装したが以前、検索結果画面の更新はされなかった。

■signal化
Angularに変更検知させたい変数をsignal化することでAngularに変更を検知させることができると知り実装してみた結果、期待通りの動作が確認できた。
現在の解決方法としてはこちらがある。

補足情報

singnal化という解決策があるものの、zone-less設定されていない、NgZone内で変数を更新しても検知されず。という現象が腑に落ちず、何が原因で更新されないのかが知りたく質問させていただきました。

初めての質問、知識が浅いというところで大変わかりづらい質問になっているかと思います。

必要な情報等ありましたらご教示いただければと思います。
また、このAngularを学ぶ際におすすめのサイト等あればこちらもご教示いただきたいです。

先輩方、何卒よろしくお願いいたします。