The Angular Router supports a powerful matching strategy that you can use to help users navigate your application. This matching strategy supports static routes, variable routes with parameters, wildcard routes, and so on. Also, build your own custom pattern matching for situations in which the URLs are more complicated.
In this tutorial, you'll build a custom route matcher using Angular's UrlMatcher
. This matcher looks for a Twitter handle in the URL.
For a working example of the final version of this tutorial, see the live example.
Implement Angular's UrlMatcher
to create a custom route matcher.
To complete this tutorial, you should have a basic understanding of the following concepts:
If you are unfamiliar with how Angular's router works, review Using Angular routes in a single-page application.
Using the Angular CLI, create a new application, angular-custom-route-match. In addition to the default Angular application framework, you will also create a profile component.
Create a new Angular project, angular-custom-route-match.
ng new angular-custom-route-match
When prompted with Would you like to add Angular routing?
, select Y
.
When prompted with Which stylesheet format would you like to use?
, select CSS
.
After a few moments, a new project, angular-custom-route-match
, is ready.
From your terminal, navigate to the angular-custom-route-match
directory.
Create a component, profile.
ng generate component profile
In your code editor, locate the file, profile.component.html
and replace the placeholder content with the following HTML.
<p> Hello {{ username$ | async }}! </p>
In your code editor, locate the file, app.component.html
and replace the placeholder content with the following HTML.
<h2>Routing with Custom Matching</h2> Navigate to <a routerLink="/@Angular">my profile</a> <router-outlet></router-outlet>
With your application framework in place, you next need to add routing capabilities to the app.module.ts
file. As a part of this process, you will create a custom URL matcher that looks for a Twitter handle in the URL. This handle is identified by a preceding @
symbol.
In your code editor, open your app.module.ts
file.
Add an import
statement for Angular's RouterModule
and UrlMatcher
.
import { RouterModule, UrlSegment } from '@angular/router';
In the imports array, add a RouterModule.forRoot([])
statement.
@NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot([ /* . . . */ ])], declarations: [ AppComponent, ProfileComponent ], bootstrap: [ AppComponent ] })
Define the custom route matcher by adding the following code to the RouterModule.forRoot()
statement.
{ matcher: (url) => { if (url.length === 1 && url[0].path.match(/^@[\w]+$/gm)) { return { consumed: url, posParams: { username: new UrlSegment(url[0].path.slice(1), {}) } }; } return null; }, component: ProfileComponent }
This custom matcher is a function that performs the following tasks:
username
route parameter as a substring of the pathA custom URL matcher behaves like any other route definition. Define child routes or lazy loaded routes as you would with any other route.
With the custom matcher in place, you now need to subscribe to the route parameters in the profile
component.
In your code editor, open your profile.component.ts
file.
Add an import
statement for Angular's ActivatedRoute
and ParamMap
.
import { ActivatedRoute, ParamMap } from '@angular/router';
Add an import
statement for RxJS map
.
import { map } from 'rxjs/operators';
Subscribe to the username
route parameter.
username$ = this.route.paramMap .pipe( map((params: ParamMap) => params.get('username')) );
Inject the ActivatedRoute
into the component's constructor.
constructor(private route: ActivatedRoute) { }
With your code in place, you can now test your custom URL matcher.
From a terminal window, run the ng serve
command.
ng serve
Open a browser to http://localhost:4200
.
You should see a single web page, consisting of a sentence that reads Navigate to my profile
.
Click the my profile hyperlink.
A new sentence, reading Hello, Angular!
appears on the page.
Pattern matching with the Angular Router provides you with a lot of flexibility when you have dynamic URLs in your application. To learn more about the Angular Router, see the following topics:
This content is based on Custom Route Matching with the Angular Router, by Brandon Roberts.
© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/routing-with-urlmatcher