angular-router

Best method to set different layout for different pages in angular 4

You can solve your problem using child routes. See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example Set your route like below const appRoutes: Routes = [ // Site routes goes here { path: ”, component: SiteLayoutComponent, children: [ { path: ”, component: HomeComponent, pathMatch: ‘full’}, { path: ‘about’, component: AboutComponent } ] }, // … Read more

How do I navigate to a parent route from a child route?

Do you want a link/HTML or do you want to route imperatively/in code? Link: The RouterLink directive always treats the provided link as a delta to the current URL: [routerLink]=”[‘/absolute’]” [routerLink]=”[‘../../parent’]” [routerLink]=”[‘../sibling’]” [routerLink]=”[‘./child’]” // or [routerLink]=”[‘child’]” // with route param ../../parent;abc=xyz [routerLink]=”[‘../../parent’, {abc: ‘xyz’}]” // with query param and fragment ../../parent?p1=value1&p2=v2#frag [routerLink]=”[‘../../parent’]” [queryParams]=”{p1: ‘value’, p2: … Read more

Angular 5 Scroll to top on every Route click

There are some solutions, make sure to check them all 🙂 Option1: The router outlet will emit the activate event any time a new component is being instantiated, so we could use (activate) to scroll (for example) to the top: app.component.html <router-outlet (activate)=”onActivate($event)”></router-outlet> app.component.ts onActivate(event) { // window.scroll(0,0); window.scroll({ top: 0, left: 0, behavior: ‘smooth’ … Read more

In Angular, What is ‘pathmatch: full’ and what effect does it have?

RouterModule.forRoot([ { path: ‘welcome’, component: WelcomeComponent }, { path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’ }, { path: ‘**’, component: ‘pageNotFoundComponent’ } ]) Case 1 pathMatch:’full’: In this case, when app is launched on localhost:4200 (or some server) the default page will be welcome screen, since the url will be https://localhost:4200/ If https://localhost:4200/gibberish this will redirect … Read more