What is ‘pathmatch: full’ and what effect does it have in Angular?

Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties.

pathmatch:full

In Angular, pathMatch: full is a configuration option used in route definitions to specify how the Angular Router should match a URL to a route. This configuration is part of the Route object in the Angular Router configuration.

When pathMatch is set to full, it means that Angular should only consider the route to be a match if the URL is equal to the specified path. In other words, the full path must match exactly for the route to be activated.

Steps for Installing & Configuring the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Create the Home and About components. Go to src/app and execute commands in the terminal

ng g c home
ng g c about

Project Structure

It will look like the following:

Example: Here, the /home will activate the HomeComponent. /about will activate the AboutComponent. An empty path (”) will redirect to /home because of the redirectTo: ‘/home’ configuration. The pathMatch: ‘full’ ensures that only an exact empty path match triggers the redirection.

HTML

<!-- app.component.html -->

<h2 style="color: green;">GeeksforGeeks</h2>
<h2>
      What is 'pathmatch: full' and
    what effect does it have in Angular?
</h2>
<nav>
    <a routerLink="/home"
       pathMatch="full">Home
      </a>
    <br>
    <a routerLink="/about"
       pathMatch="full">About
      </a>
</nav>

<router-outlet></router-outlet>

HTML

<!-- home.compoent.html -->
<h3 style="color: indianred;">
    Hi Geek!! Please vote for me for
    Geeks Premier League
</h3>

HTML

<!-- about.component.html -->
<h3 style="color:violet">
      Hi Geek!! Use the like button to vote
</h3>

Javascript

// app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

Javascript

// app.module.ts

import { NgModule }
    from '@angular/core';
import { AppComponent }
    from './app.component';
import { BrowserModule }
    from '@angular/platform-browser';
import { RouterModule, Routes }
    from '@angular/router';
import { HomeComponent }
    from './home/home.component';
import { AboutComponent }
    from './about/about.component';

const routes: Routes = [
    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(routes)
    ]
})
export class AppModule { }

Output:

What effect will be there if we don’t use pathmatch:full ?

Without pathMatch: full, even a URL like /home/something could match the empty path and redirect to /home. Adding pathMatch: full ensures that only an exact match triggers the redirect.

Example: In this case, without pathMatch: ‘full’, an empty path (”) would match any URL that starts with an empty path. By default value of pathMatch is ‘prefix’. For example; /home would still activate the HomeComponent, /about would activate the AboutComponent, and/something would also redirect to /home, even though it doesn’t exactly match the empty path.

HTML

<!-- app.component.html -->
<h2 style="color: green;">GeeksforGeeks</h2>
<h2>
      What is 'pathmatch: full' and
    what effect does it have in Angular?
</h2>
<nav>
    <a routerLink="/home">Home</a>
    <br>
    <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

HTML

<!-- about.component.html -->
<h3 style="color:violet">
  Hi Geek!! Use the like button to vote
</h3>

HTML

<!-- home.component.html -->
<h3 style="color: indianred;">
    Hi Geek!! Please vote for me for
    Geeks Premier League
</h3>

Javascript

// app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

Javascript

// app.module.ts
import { NgModule }
    from '@angular/core';
import { AppComponent }
    from './app.component';
import { BrowserModule }
    from '@angular/platform-browser';
import { RouterModule, Routes }
    from '@angular/router';
import { HomeComponent }
    from './home/home.component';
import { AboutComponent }
    from './about/about.component';

const routes: Routes = [
    { path: 'about',
      component: AboutComponent },
    { path: 'home',
      component: HomeComponent },
    { path: '', redirectTo: '/home',
      pathMatch: 'prefix' },
];

@NgModule({
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(routes)
    ]
})
export class AppModule { }

Output:

Conclusion

Using pathMatch: ‘full’ ensures that only an exact empty path match triggers the redirect, providing more precise control over route matching. When pathMatch is set to full, it means that Angular should only consider the route to be a match if the URL is equal to the specified path. In other words, the full path must match exactly for the route to be activated.