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

10 months ago

Latest Post kubectl: most useful commands (a growing list) by Matthew Davis

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:

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 {}
Matthew Davis

Published 10 months ago

Comments?

Leave us your opinion.