Here’s an updated example using Angular 4 (also compatible with Angular 5 – 8) Routes with home route protected by AuthGuard import { Routes, RouterModule } from ‘@angular/router’; import { LoginComponent } from ‘./login/index’; import { HomeComponent } from ‘./home/index’; import { AuthGuard } from ‘./_guards/index’; const appRoutes: Routes = [ { path: ‘login’, component: … Read more
Absolute path routing There are 2 methods for navigation, .navigate() and .navigateByUrl() You can use the method .navigateByUrl() for absolute path routing: import {Router} from ‘@angular/router’; constructor(private router: Router) {} navigateToLogin() { this.router.navigateByUrl(‘/login’); } You put the absolute path to the URL of the component you want to navigate to. Note: Always specify the complete … Read more
queryParams queryParams is another input of routerLink where they can be passed like <a [routerLink]=”[‘../’]” [queryParams]=”{prop: ‘xxx’}”>Somewhere</a> fragment <a [routerLink]=”[‘../’]” [queryParams]=”{prop: ‘xxx’}” [fragment]=”yyy”>Somewhere</a> routerLinkActiveOptions To also get routes active class set on parent routes: [routerLinkActiveOptions]=”{ exact: false }” To pass query parameters to this.router.navigate(…) use let navigationExtras: NavigationExtras = { queryParams: { ‘session_id’: sessionId }, … Read more
Angular2 by default uses encodeURIComponent() to encode queryParams in URL, you can avoid it by writing custom URL serializer and override default functionality. In my case, I wanted to avoid Angular2 to avoid replacing comma(,) by (%2). I was passing Query as lang=en-us,en-uk where it was getting converted to lang=en-us%2en-uk. Here how I worked it … Read more
canActivate needs to return an Observable that completes: @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AngularFireAuth, private router: Router) {} canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { return this.auth.map((auth) => { if (auth) { console.log(‘authenticated’); return true; } console.log(‘not authenticated’); this.router.navigateByUrl(‘/login’); return false; }).first(); // this might not be necessary – ensure `first` is imported if you … Read more
You need to configure all the routing. For testing, rather than using the RouterModule, you can use the RouterTestingModule from @angular/router/testing, where you can set up some mock routes. You will also need to import the CommonModule from @angular/common for your *ngFor. Below is a complete passing test import { Component } from ‘@angular/core’; import … Read more
With the new Angular router, you can add a [routerLinkActive]=”[‘your-class-name’]” attribute to all your links: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”[‘is-active’]”>Home</a> Or the simplified non-array format if only one class is needed: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”‘is-active'”>Home</a> Or an even simpler format if only one class is needed: <a [routerLink]=”[‘/home’]” routerLinkActive=”is-active”>Home</a> See the poorly documented routerLinkActive directive for more info. … Read more
Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more
Here’s what I did. import { DefaultUrlSerializer, UrlTree } from ‘@angular/router’; export class LowerCaseUrlSerializer extends DefaultUrlSerializer { parse(url: string): UrlTree { // Optional Step: Do some stuff with the url if needed. // If you lower it in the optional step // you don’t need to use “toLowerCase” // when you pass it down to … Read more
<router-outlet [node]=”…”></router-outlet> is just invalid. The component added by the router is added as sibling to <router-outlet> and does not replace it. See also https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service @Injectable() export class NodeService { private node:Subject<Node> = new BehaviorSubject<Node>([]); get node$(){ return this.node.asObservable().filter(node => !!node); } addNode(data:Node) { this.node.next(data); } } @Component({ selector : ‘node-display’, providers: [NodeService], template : … Read more