CODEWITHSUNDEEP
angularrouter
Moblize IT
Moblize IT

Reputation: 1328

Angular solving router navigation issue

I have our webapp created which has the outer shell rendered from app.components.html

the idea is header footer stays the same and just the middle part is dynamic. The middle part is basically few angular components wrapped inside ng-container and rendered if the currentItem == 'some value'.

<ng-container *ngIf="current-item === 'contact'>
   <app-contact-component></app-contact-component>
</ng-container>
<ng-container *ngIf="current-item === 'about'>
   <app-about-component></app-about-component>
</ng-container>
<ng-container *ngIf="current-item === 'service'>
   <app-service-component></app-service-component>
</ng-container>
<ng-container *ngIf="current-item === 'business'>
   <app-business-component></app-business-component>
</ng-container>

based on header menu item i switch the current-item value and that component is rendered. This is working fine. Now, we came up with a requirement where we for business profile we want our customers to create their business profile. So, basically they can type URL as

site.com/biz/companyA site.com/biz/companyX

we implemented the code using activatedRoute and are able to read the path parameter as well. The only problem is that when user does above the URL in the browser does not stay and changes to site.com

How do we keep the URL persist in the address bar?

We tried a technique where we added a new route to the router as below

const routes: Routes = [
  {path: '', redirectTo: '', pathMatch: 'full'},
  {path: 'biz/:id', component: BusinessProfileComponent}
];

the problem with above is that then the page messes up as this tries to render all that is on the base page plus businessProfileComponent.

Upvotes: 0

Views: 94

Answers (1)

Moblize IT
Moblize IT

Reputation: 1328

i had to restructure my layout a bit and now using instead of embedding component in the middle or outer shell, i divided the whole layout as top part and bottom part. the top part is now static rendering in app.html above . Everything else now renders below it based on router navigation.

Upvotes: 0

Related Questions