Angular 7 Routing: Path & Query String

With Angular you can “parameterize” your path so that you can make the path bits available to you within your application. You can also interact with the query string. In this exercise we will cover the following topics:

• Parsing the Path
• Accessing the Query String

users.component.ts

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'app-users',
    templateUrl: './users.component.html',
    styleUrls: ['./users.component.scss']
})
export class UsersComponent {

    public users: string[] = ['John', 'Bob', 'Sally'];

    public constructor(private route: ActivatedRoute) {

        route.params.subscribe((params) => {

            console.log('params', params);

        });

        route.queryParams.subscribe((params) => {

            console.log(params);

        });

    }

}

Enabling Debug Mode

Angular comes with a pretty beefy debug mode for debugging your routing. Simple add an object as the second parameter to your RouterModule import that contains

enableTracing: true

Full example with enableTracing: true:

@NgModule({
    
    ...

    imports: [

        BrowserModule,

        MatToolbarModule,
        MatButtonModule,

        ModuleRoutesModule,

        RouterModule.forRoot([

            {

                path: 'home',
                component: HomeComponent

            }, {

                path: 'contact',
                component: ContactComponent

            }

        ], {

            enableTracing: true

        })

    ],

    ...

})
export class AppModule {}