Problem Statement
Compare passing data via @Input/@Output with passing data via router extras/state.
Explanation
Use @Input/@Output for parent↔child communication in a component hierarchy. Use router extras (queryParams, state) for cross-feature navigation or when no direct parent-child relationship exists. Router state is not persisted on hard refresh; URL params are shareable/bookmarkable.
Code Solution
SolutionRead Only
// programmatic navigation with state
this.router.navigate(['/checkout'], { state: { cartId } });
// in target component
const cartId = history.state?.cartId;