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: trueFull 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 {}