Skip to content

Set metadata using routing

Another way you can set metadata in your page is using the library's routing module. The module will listen to the Angular's Router events and set the metadata1 for the page every time it detects the route has changed.

Setup

First, ensure you added the module to your app.

Standalone, module-free apps

This is the default approach for authoring Angular projects generated with Angular CLI v17 and above. It's also the recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration

Open your app.config.ts file where provideNgxMetaCore is provided. Ensure the routing module is added by adding a call to provideNgxMetaRouting

app.config.ts
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(),
    // ...
  ],
}

Check out the example standalone app's app.config.ts file for a full config file example

Non-standalone, module-based apps

This is the default and traditional approach for authoring Angular projects generated with Angular CLI before v17. It's not the preferred or recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration. You can anyway keep using the module-based equivalent APIs for now if you prefer to do so.

Open your app.module.ts where provideNgxMetaCore is provided. Ensure the routing module is added by adding a call to provideNgxMetaRouting

app.module.ts
import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(),
  ],
  // ...
})
export class AppModule {}

Check out the example module-based app's app.module.ts file for a full app module file example

Usage

Once the module has been set up, you can add the metadata values for a page in its route's data

import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
import { StandardMetadata } from '@davidlj95/ngx-meta/standard'

export const routes: Routes = [
  // ...
  {
    path: 'cool-page',
    component: CoolPageComponent,
    data: {
      meta: {
        title: 'Cool page',
        description: '⚠️ Contains awesomeness',
        standard: {
          keywords: ['cool', 'awesomeness'],
        },
      } satisfies NgxMetaRouteData<GlobalMetadata & StandardMetadata>,
    },
  },
]

That's it, you should see the <title>, <meta name="description"> and <meta name="keywords"> set in that page with the values you provided ✨

Title and description may set other metadata elements too

Given they are specified in global scope. For instance, <meta property="og:title"> and <meta property="og:description"> will be set if Open Graph module has been added. Take a look at metadata values JSON guide for more information.

As with the service case, Typescript's satisfies operator will help you write the proper JSON of metadata values to set.

The NgxMetaRouteData utility type ensures route data is inside meta key of the route's data.

As per the global and standard types to shape the metadata values JSON, take a look at metadata values JSON guide for more information about it.

Check out the example standalone app app.routes.ts file for a full routes file example

Benefits over using service

You'll be able to provide the metadata values for a page in a more declarative way by attaching that data next to where the route is defined. And save up some code by avoiding the boilerplate of calling ngOnInit as per service usage. Also, metadata values will get cleared every time you navigate to another page (and replaced by that page's metadata values). To have some metadata values be present for every page, check out how to set some metadata defaults

However, you won't be able to set there dynamic values. For instance, if the route loads a product's detail (/product/:id), you won't be able to set at the route's data the specific product metadata given you don't know the product ID at that point yet. Unless...

Using route's data and service

You can use both route's data and service to set the metadata values for a page. And both will be used when setting the metadata values in an additive manner.

For instance, if setting some metadata values in the route's data:

import { NgxMetaRouteData } from '@davidlj95/ngx-meta/routing'
import { GlobalMetadata } from '@davidlj95/ngx-meta/core'
import { StandardMetadata } from '@davidlj95/ngx-meta/standard'

export const routes: Routes = [
  // ...
  {
    path: 'cool-page',
    component: CoolPageComponent,
    data: {
      meta: {
        title: 'Cool page',
        description: '⚠️ Contains awesomeness',
        standard: {
          keywords: ['cool', 'awesomeness'],
        },
      } satisfies NgxMetaRouteData<GlobalMetadata & StandardMetadata>,
    },
  },
]

And then some metadata values are provided using the service

import { NgxMetaService, GlobalMetadata } from '@davidlj95/ngx-meta/core'

@Component({
  // ...
})
export class CoolPageComponent implements OnInit {
  constructor(private readonly ngxMetaService: NgxMetaService) {}

  ngOnInit(): void {
    this.ngxMetaService.set({
      image: {
        url: 'https://example.org/cool.png',
        alt: 'A koala riding a horse',
      },
    } satisfies GlobalMetadata)
  }
}

The final metadata values set will contain the title, description, keywords and image provided.

Next steps

To know more about the shape of the JSON containing metadata values to set, check out the metadata values JSON guide.

If you want to set some values for every page, disregarding the route, check out how to set some default metadata values

  1. Actually using the NgxMetaService APIs under the hood ↩