feat(@angular/router): Add navigateToParent method with steps option

[ferhado]

Which @angular/* package(s) are relevant/related to the feature request?

router

Description

This feature proposes adding a new method called navigateToParent to the @angular/router package, allowing for easier navigation back from detail components with an option to specify the number of steps to navigate back.

Proposed solution

Current Usage:

import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hero-detail',
})
export class HeroDetailComponent {
  private router = inject(Router);
  private route = inject(ActivatedRoute);

  navigateToParent() {
    this.router.navigate(['..'], { relativeTo: this.route });
  }
}

New Usage:

import { Router } from '@angular/router';

@Component({
  selector: 'app-hero-detail',
})
export class HeroDetailComponent {
  private router = inject(Router);

  navigateToParent() {
    this.router.navigateToParent({ steps: 2 });
  }
}

Alternatives considered

None. This feature provides a cleaner and more intuitive way to navigate back without needing to inject ActivatedRoute.
or hardcoding the parent url.

[atscott]

As noted, this can be accomplished with existing APIs. If you would like shorthands or aliases, you can do so in your own application with helper methods (and note that in your example, you still need to tell the router which route you're navigating relative to).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}