Angular 16: Simplify boileplate code to read route and query parameters from ActivatedRoute

[zaychenko-sergei]

Refactor components in the project to leverage Angular 16 new ability to inject route and query parameters as component inputs. This feature simplifies component design by directly mapping route and query parameters to component @Input properties, improving code clarity and reducing boilerplate in routing logic.

Motivation:

• This reduces the need for manual extraction of route/query parameters in components.
• This clearly defines component inputs and makes the relationship between the route/query parameters and the component explicit.
• Direct input injection facilitates more predictable and testable components. Complex mocking of ActivatedRoute can be eliminated, setting inputs in tests is much easier.

TODO in this ticket:

• Locate components that currently retrieve route or query parameters using ActivatedRoute
• Replace manual parameter extraction in these components with @Input properties.
• Update the routing configuration to pass the required parameters as inputs to the components (withComponentInputBinding).
• Update unit tests for refactored components to verify the new input mechanism, get rid of older mocking of ActivatedRoute

Additional reading:

• How to Pass Url Query Parameters (Routing Params) to Input() Decorator with Transform in Angular
• How to Use @Input() to Read Angular Route Parameters