CODEWITHSUNDEEP
angularangular-ui-router
user9154750
user9154750

Reputation: 37

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

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

Upvotes: 2

Views: 1672

Answers (1)

Gérôme Grignon
Gérôme Grignon

Reputation: 4238

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},
    ]}
  ]}

Upvotes: 2

Related Questions