How to make child route take full page in a nested route in angular

user_9154750 0
Viewed 868

I have a parent route called PRODUCTS and in this route I have a child route called CREATE-PRODUCT. When user clicks on CREATE-PRODUCT button, its meant to navigate to the create-product route but I still see the parent route content shown instead of making the CREATE-PRODUCT path full and have that content alone. What am I missing? I have images explaining how I went about it. I know I'm wrong somewhere. Please help.

THE CREATE PRODUCT ROUTE SHOWS ON THE LEFT SIDE WHEN BUTTON IS CLICKED INSTEAD OF TAKING FULL PATH enter image description here

MY ROUTING IMAGE enter image description here

I THEN PLACED THE IN THE PARENT (PRODUCT) COMPONENT enter image description here

I INTEND TO MAKE SURE SIDEMENU SHOWS THE ACTIVE STATE. HERE IS HOW I ADDED ACTIVE STATE TO EACH ACTIVE ROUTE IN MY SIDEMENU. enter image description here

angular-ui-router angular
1 Answers

As create-product route is a child of products route and as there is a router-outlet inside the ProductComponent, this is where the CreateProduct component will be rendered (that's why we see it on the top of your ProductComponent on the screenshot).

Update your route architecture in order to keep the active state on products route :

{path: 'vendors', component: VendorsComponent, children: [
    {path: 'products', children: [
      {path: '', component: ProductsComponent},
      {path: 'create-product', component: CreateProductComponent},
    ]}
  ]}
user_93957720
Related