CODEWITHSUNDEEP
angular
user9021214
user9021214

Reputation: 21

Angular child/parent routing issue

I am currently making a CRUD app in angular as a side project. I have a page called "Staff", which shows me all of the current staff as well as some search filters. There is also a button which when clicked, takes you to a page to add new staff.

Now, this new staff button is not classed as a direct child from the staff component. When the user clicks the "Add new staff" button, I want the add-new-staff page to take up the main and not any child . I essentially want it to be its own page, but I want the url path to be 'staff/add-new-staff.

The way I am currently routing it is by using a router link and using '/staff/add-new-staff/'.

Now this currently works, however I feel as if there is an easier way. I have looked in to using ['/add-new-staff', {realtiveTo: this.route}], however this does not seem to work.

Is there an easier way of navigating to the 'add-new-staff' page instead of typing out the full 'staff/add-new-staff' router link out? Or is there anything I can change in my app-routing module?

App routing module

    const routes: Routes = [{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: 'staff', component: StaffComponent },
  { path: 'staff/add-new-staff', component: AddNewStaffComponent },

Router Link

    <p class="mt-2"><a routerLink="/staff/add-new-staff">Add new staff</a></p>

Upvotes: 0

Views: 72

Answers (1)

user9021214
user9021214

Reputation: 21

This has been solved.

I had to import the ActivatedRoute module and the code used was:

navigate() {
    this.router.navigate(['add-new-staff'], { relativeTo: this.route });
}

Upvotes: 1

Related Questions