Router

About

Servers which will host the deploy will need to, on 404 error, redirect to index.php to garantee that Angular SPA will take over the routing.

Tipically the routes will be inside a file app.routes.ts.

Routes order is important since Router uses a first-match wins strategy.

More specific routes should be placed above less specific (more generic) routes.
Place wildcard ** routes last.

Url changes on a Component will re-use the Component instance.

This means that Signals or Observables are needed to catch changes on the URL like /user/1 -> /user/2.

app.routes.ts

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'employees', component: EmployeesComponent },
    { path: 'employees/:id', component: EmployeeComponent },
    ...
];

`<router-outlet>`

The router Directive to indicate the place where the Angular router will load the Component of the currently selected route.

`routerLink`

Do not used the <a href="" /> to load routes, because these routes will be loaded but the page will also be reloaded, thus states will be lost.

<!-- Full Path -->
<a routerLink="/employee"></a>
<!-- Relative Path -->
<a routerLink="employee"></a>
<!-- Can be used with Arrays to declare multiple hierarchical paths like '/employee/new' -->
<a [routerLink]="['/employee']"></a>
<a [routerLink]="['/employee', 'new']"></a>

It can be used with Absolute paths or Relative paths.

Absolute paths always starts with / like /home.
Relative paths starts without the /, and always append the passed url to the current url.
- You can use ../, like in directories, to remove go back to upper Url paths.
- You can use ./, to stay in the current path.

Passing `queryParams` to the `routerLink`

<!-- employee?order=asc -->
<a routerLink="/employee" [queryParams]="{ order: 'asc', ... }"></a>

Passing `fragments` to the `routerLink`

<!-- employee#loading -->
<a routerLink="/employee" [fragment]="'loading'"></a>

`routerLinkActive`

Used to attach a css class to elements, for instance, when selecting the select tabs.

Without exact: true, it will check as contained substrings. So / will always be true.

<li routerLinkActive="<cssclass>" [routerLinkActiveOptions]="{exact: true}"></li>

Programatically navigate `router.navigate()`

navigate() method doesn't know your currently route. (So relative paths don't add up)
- If the Url passed is static, it can be the literal Url string.
- For dynamic path, must use an Array of path segments.
  - These segments are added to the current Url.
  - Or to the one provided in relativeTo config property.
Some additional configs that you can pass to navigate() include:
- replaceUrl: To avoid that the browser can go back to that route if you hit the back button.
- relativeTo: Used for dynamic paths, the specified relativeTo will be the main Url where the paths will be added to.
- queryParamsHandling: How navigate handles queryParams and fragments values after a navigation.

@Component({ ... })
export class Component {
    constructor(private router: Router, private route: ActivatedRoute) {}

    goto() {
        // By default it is always relativeTo root '/'
        this.router.navigate(['/employee', ...]);

        // To tell navigate the current path
        this.router.navigate(['/employee', ...], { relativeTo: this.route });
    }
}

Passing `queryParams`

// employess/5/edit?allowEdit=1
this.router.navigate(["/employee", 5, "edit"], { queryParams: { allowEdit: "1" } });

Passing `fragments`

// employess/5/edit#loading
this.router.navigate(["/employee", 5, "edit"], { fragment: "loading" });

Preserving `queryParams` and `fragments` - after Navigate with `queryParamsHandling`

merge: Will merge new params with existing queryParams.
preserve: Will just preserve the existent queryParams.

this.router.navigate(["edit"], { relativeTo: this.route, queryParamsHandling: "merge" | "preserve" });

Nested Routes

Each child route will need a new <router-outlet> to render it's paths Components.

For instance, in the EmployeesComponent you will need to have a <router-outlet> which will be the place it's child routes will be loaded.

app.routes.ts

const appRoutes: Routes = [
    { path: "", component: HomeComponent },
    {
        path: "employees",
        component: EmployeesComponent,
        children: [
            // employees/:id
            { path: ":id", component: EmployeeComponent },
            // employees/:id/edit
            { path: ":id/edit", component: EditEmployeeComponent },
        ],
    },
];

Now Each parent component will need to have a <router-outlet>, which is the place it will load it's children Components.

Nested routes to it's own file

You can grab the children routes and put them in a different .routes.ts file for more leaner structure.

employee.routes.ts

export const employeesRoutes: Routes = [
    // employees/:id
    { path: ":id", component: EmployeeComponent },
    // employees/:id/edit
    { path: ":id/edit", component: EditEmployeeComponent },
];

app.routes.ts

const appRoutes: Routes = [
    { path: "", component: HomeComponent },
    {
        path: "employees",
        component: EmployeesComponent,
        children: employeesRoutes,
    },
];

Wildcard Routes

To handle routes that shouldn't exist.

** is the wildcard and will catch everything that is not currently specified on the routes.
The order that you use it is VERY IMPORTANT, always use them as the last route.

const appRoutes: Routes = [
    { path: "not-found", component: NotFoundComponent },
    { path: "**", redirectTo: "/not-found" },
];

// Or

const appRoutes: Routes = [{ path: "**", component: NotFoundComponent }];

Redirects

To be able to redirect with urls that may always trigger like path: '', you can use the option pathMatch: 'full'

{ path: '', redirectTo: '/somewhere-else', pathMatch: 'full' }

You can use more complex logic in redirect, returning a string or UrlTree.

{
    path: '',
    redirectTo: ({ queryParams }) => {
        const errorHandler = inject(ErrorHandler);
        const userIdParam = queryParams['userId'];
        if (userIdParam !== undefined) {
            return `/user/${userIdParam}`;
        } else {
            errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
            return `/not-found`;
        }
    },
}

`pathMatch` option

prefix: Will look at the route's path and combine with parent paths if available, and then checks if the Url in the browser STARTS with this path.
full: Will look at the route's path and combine with parent paths if available, and then checks if the FULL Url in the browser is equal to this path.

Setting the Page Title

Each page in your application should have a unique title so that they can be identified in the browser history.

The Router sets the document's title using the title property.

You can also provide custom title strategies:

By providing ResolverFn functions.
Or by extending the TitleStrategy, check the docs.

`static` titles

const appRoutes: Routes = [
    { path: "", component: HomeComponent, title: "Home" },
    { path: "employees", component: EmployeesComponent, title: "Employees" },
];

`dynamic` title

You can provide dynamic title values by using resolver functions, just like in dynamic data.

// Each `resolveTitle` functions comes from it's Component file
const appRoutes: Routes = [
    { path: "", component: HomeComponent, title: resolveHomeTitle },
    { path: "employees", component: EmployeesComponent, title: resolveEmployeesTitle },
];

Passing `static` and `dynamic` Data to a Route

You can use both methods at the same time.

`static` data

You can pass static data to routes by providing them in the data property.

const appRoutes: Routes = [{ path: "", component: HomeComponent, data: { message: "Hello" } }];

Access with Signals

You can then access the data inside the Component with input(), by having a variable with the same name as the data property.

export class HomeComponent {
    message = input.required<string>();
}

Access with `ActivatedRoute` - with `data` (`Observable`)

data Observable will provide values from static and dynamic.

export class HomeComponent implements OnInit {
    message: string;
    private activatedRouteDataSubscription;
    private activatedRoute = inject(ActivatedRoute);

    ngOnInit() {
        this.activatedRouteDataSubscription = this.activatedRoute.data.subscribe((values) => {
            this.message = values.message;
        });
    }

    ngOnDestroy() {
        this.activatedRouteDataSubscription.unsubscribe();
    }
}

`dynamic` data - with `ResolveFn` functions

You can pass dynamic data to routes with resolve property of routes.

The resolve accepts an object just like the static one, but instead of static values you will provide valid Angular resolvers, which are functions.

The resolver will be called for every navigation action on the specific route.

BUT by default will NOT be re-executed when queryParams changes.
To allow re-execution set the runGuardsAndResolvers to always or paramsOrQueryParamsChange.

const appRoutes: Routes = [
    {
        path: "",
        component: HomeComponent,
        runGuardsAndResolvers: "always",
        resolve: { message: resolveMessage },
    },
];

export class HomeComponent {
    // Access the dynamic data with Signals
    message = input.required<string>();
    ...
}

// Can use the snapshot since it is executed every time the Route is active
export const resolveMessage: ResolveFn<string> = (activatedRoute: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) => {
    // You may `inject` services in here
    // ...
    return 'Hello: ' + data; // data is of type string
}

`dynamic` data - with `Resolve` Classes as Services (Avoid)

This is an older way, prefer the use with Functions. (Above)

You can pass dynamic data to routes with services implementing Resolve class.

@Injectable({
    providedIn: "root",
})
export class MessageResolver implements Resolve<string> {
    resolve(activatedRoute: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) {
        return "Hello: " + data; // data is of type string
    }
}

const appRoutes: Routes = [
    {
        path: "",
        component: HomeComponent,
        resolve: { message: MessageResolver },
    },
];

export class HomeComponent {
    message = input.required<string>();
    ...
}

Fetching Url data - with `input()`

Changes in the URL will use still use the same Component's instance.

This means that ngOnInit will NOT execute again, and changes in :params for instance will not be picked.

Retrieving data with Signals will garantee to get the new values.

When working Signals you must declare in the provideRouter the argument withComponentInputBinding.

export const appConfig = {
    providers: [provideRouter(routes, withComponentInputBinding())],
};

Access Parent Route Data

With input() the Component can always access it's own url data, BUT the Component cannot access by default it's parent route url data.

Provide an additional configuration withRouterConfig(), with paramsInheritanceStrategy property.

Just consider still using UNIQUE names to avoid clashing of param names in the routes.

export const appConfig = {
    providers: [
        provideRouter(
            routes,
            withComponentInputBinding(),
            withRouterConfig({
                paramsInheritanceStrategy: "always",
            })
        ),
    ],
};

Retrieving param `/:userId`

You can retrieve url parameters by having a variable with the exact same name as declared in the Route.

The expected type will always be string since the url is a string.

@Component({ ... })
export class UserComponent {
    // user/:userId
    // You may use `required` since Url param will most likely be required in the URL
    userId = input.required<string>();
}

Retrieving multiple params `/:userId/:name`

@Component({ ... })
export class UserComponent {
    // user/:userId
    userId = input.required<string>();
    name = input.required<string>();
}

Retriving Url queryParams `?allowEdit=value`

Just like a /:param, for queryParams just create a variable with the same name as the queryParam.

@Component({ ... })
export class UserComponent {
    // user?order=value
    // For queryParams don't use `required` since usually are opcional values
    order = input<'asc' | 'desc'>();
}

Retrieving Url fragments `#loading`

Not sure how to retrieve with Signals, but it could be just setting the variable input() with the same name as the #fragment name.

Fetching Url data - with `ActivatedRoute` service

With Observables a Component can by default access it's own route params AND parent route params.

Changes in the URL will use still use the same Component's instance.

This means that ngOnInit will NOT execute again, and changes in :params for instance will not be picked.

Retrieving data with Observables will garantee to get the new values.

Retriving data with snapshot will NOT get new values.

Fetching data the Reactive way - with (`Observable`)

Retrieving Url params /:userId - with paramMap

You can access url params by subscribing to paramMap property of ActivatedRoute.

@Component({ ... })
export class UserComponent implements OnInint, OnDestroy {
    userId: string;
    private activatedRouteParamsSubscription;

    constructor(private activatedRouteService: ActivatedRoute) {}
    // or
    readonly activatedRouteService = inject(ActivatedRoute);

    ngOnInit() {
        this.activatedRouteParamsSubscription = this.activatedRouteService.paramMap.subscribe({
            next: (paramMap) => {
                this.userId = paramMap.userId;
            }
        });
    }

    ngOnDestroy() {
        this.activatedRouteParamsSubscription.unsubscribe();
    }
}

Retrieving Url multiple params /:userId/:name - with paramMap

this.activatedRouteParamsSubscription = this.activatedRouteService.paramMap.subscribe({
    next: (paramMap) => {
        this.userId = paramMap.userId;
        this.name = paramMap.name;
    },
});

Retrieving Url queryParams ?allowEdit=value - with queryParams

You can access url queryParams by subscribing to queryParams property of ActivatedRoute.

this.activatedRouteQueryParamsSubscription = this.activatedRouteService.queryParams.subscribe({
    next: (params) => {
        this.order = params.order;
    },
});

Retrieving Url fragments #loading - with fragment

You can access url fragment by subscribing to fragment property of ActivatedRoute.

this.activatedRouteFragmentSubscription = this.activatedRouteService.fragment.subscribe({
    next: (fragment) => {
        this.loading = fragment;
    },
});

Fetching data NOT Reactive - with (`.snapshot`)

Values from the snapshot are not Observables, they are actual values to be accessed.

The snapshot values are NOT reactive to the Url changes. (The values displayed will be the values of the FIRST run on the Component)

Retrieving Url param /:userId - with snapshot.paramMap or snapshot.params

@Component({ ... })
export class UserComponent implements OnInint, OnDestroy {
    userId: string;

    constructor(private activatedRouteService: ActivatedRoute) {}
    // Or
    readonly activatedRouteService = inject(ActivatedRoute);

    ngOnInit() {
        this.userId =  this.activatedRouteService.snapshot.paramMap.userId;
    }
}

Retrieving Url queryParams `?allowEdit=value` - with `snapshot.queryParamMap` or `snapshot.queryParams`

@Component({ ... })
export class UserComponent implements OnInint {
    allowEdit: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.allowEdit = this.route.snapshot.queryParams['allowEdit'];
    }
}

Retrieving Url fragments `#loading` - with `snapshot.frament`

Only one fragment may be passed.

@Component({ ... })
export class UserComponent implements OnInint {
    loading: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.loading = this.route.snapshot.loading;
    }
}

Route Guards

Generating Guard (CLI)

ng g guard [guard-name] [options]

It is code that can be executed before a route is loaded or when leaving a route, that checks whether a certain navigation action should be permitted or not.

Typically guards will have their own files <guard-name>.guard.ts.

Useful for preventing unauthorized access.

Add Guards to routes by using the routes properties that start with can.

By default a Guard will guard the Route where it was declared, and it's child routes.

Guards can be defined by:

Guard functions.
Guard Services that implement certain interfaces (This is the old way)

const appRoutes: Routes = [
    {
        path: "",
        component: HomeComponent,
        // They receive an array of Guards (Functions or Classes)
        canMatch: [],
        canActivate: [],
        canActivateChild: [],
        canDeactivate: [],
    },
];

`canMatch`

Allows you to control whether the entire route should be matched by a certain navigation action or not.

For instance, if some path that has been entered into the Url should match this route or not.

with Functions

/**
 * route: Current route that is trying to be matched.
 * segments: An array of Url path segments.
 */
export const authGuard: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
    // Return `true` to grant access to the route, `false` to deny it
    return true;

    // Or you may return a UrlTree to redirect the navigation
    return router.parseUrl("/home");

    // Or you can redirect like this
    return new RedirectCommand(router.parseUrl("/home"));
};

with Classes

export class AuthGuard implements CanMatch {
    canMatch(route: Route, segments: UrlSegment[]) {
        return true;
    }
}

`canActivate`

Comes one step after canMatch but before the component has been loaded.

It will be checked by Angular once a route has been identified as matching for the currently active path.

export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
    // Return `true` to grant access to the route, `false` to deny it
    return true;

    // Or you may return a UrlTree to redirect the navigation
    return router.parseUrl("/home");

    // Or you can redirect like this
    return new RedirectCommand(router.parseUrl("/home"));
};

`canActivateChild`

Can be used if you want to activate the route, the Component, but not necessarily the child components of that route.

export const authGuard: CanActivateChildFn = (childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
    // Return `true` to grant access to the route, `false` to deny it
    return true;

    // Or you may return a UrlTree to redirect the navigation
    return router.parseUrl("/home");

    // Or you can redirect like this
    return new RedirectCommand(router.parseUrl("/home"));
};

`canDeactivate`

To control whether a user is allowed to leave a page or not.

export class HomeComponent {
    unsavedData = signal<boolean>(false);
}

// Specify `HomeComponent` as the implicit type of `CanDeactivateFn` so that you receive it in the `component` parameter
export const canLeavePage: CanDeactivateFn<HomeComponent> = (component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => {
    // Return `true` to let navigate out of the component, or `false` to deny it
    if (component.unsavedData() === false) return false;
    return true;

    // Making a confirmation dialog
    if (component.unsavedData() === false) {
        return window.confirm("Do you really want to leave?");
    }
    return true;

    // You may also return a UrlTree to redirect the navigation
    return router.parseUrl("/home");
};

PreviousTemplate-Driven Form NextHTTP Client

Last updated 7 months ago

About

<router-outlet>

routerLink

Passing queryParams to the routerLink

Passing fragments to the routerLink

routerLinkActive

Programatically navigate router.navigate()

Passing queryParams

Passing fragments

Preserving queryParams and fragments - after Navigate with queryParamsHandling

Nested Routes

Nested routes to it's own file

Wildcard Routes

Redirects

pathMatch option

Setting the Page Title

static titles

dynamic title

Passing static and dynamic Data to a Route

static data

Access with Signals

Access with ActivatedRoute - with data (Observable)

dynamic data - with ResolveFn functions

dynamic data - with Resolve Classes as Services (Avoid)

Fetching Url data - with input()

Access Parent Route Data

Retrieving param /:userId

Retrieving multiple params /:userId/:name

Retriving Url queryParams ?allowEdit=value

Retrieving Url fragments #loading

Fetching Url data - with ActivatedRoute service

Fetching data the Reactive way - with (Observable)

Fetching data NOT Reactive - with (.snapshot)

Retrieving Url queryParams ?allowEdit=value - with snapshot.queryParamMap or snapshot.queryParams

Retrieving Url fragments #loading - with snapshot.frament

Route Guards

Generating Guard (CLI)

canMatch

with Functions

with Classes

canActivate

canActivateChild

canDeactivate

`<router-outlet>`

`routerLink`

Passing `queryParams` to the `routerLink`

Passing `fragments` to the `routerLink`

`routerLinkActive`

Programatically navigate `router.navigate()`

Passing `queryParams`

Passing `fragments`

Preserving `queryParams` and `fragments` - after Navigate with `queryParamsHandling`

`pathMatch` option

`static` titles

`dynamic` title

Passing `static` and `dynamic` Data to a Route

`static` data

Access with `ActivatedRoute` - with `data` (`Observable`)

`dynamic` data - with `ResolveFn` functions

`dynamic` data - with `Resolve` Classes as Services (Avoid)

Fetching Url data - with `input()`

Retrieving param `/:userId`

Retrieving multiple params `/:userId/:name`

Retriving Url queryParams `?allowEdit=value`

Retrieving Url fragments `#loading`

Fetching Url data - with `ActivatedRoute` service

Fetching data the Reactive way - with (`Observable`)

Fetching data NOT Reactive - with (`.snapshot`)

Retrieving Url queryParams `?allowEdit=value` - with `snapshot.queryParamMap` or `snapshot.queryParams`

Retrieving Url fragments `#loading` - with `snapshot.frament`

`canMatch`

`canActivate`

`canActivateChild`

`canDeactivate`