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
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 NgxMetaCoreModule
is imported. Ensure NgxMetaRoutingModule
is imported too by calling NgxMetaRoutingModule.forRoot
import {NgxMetaCoreModule} from '@davidlj95/ngx-meta/core'
import {NgxMetaRoutingModule} from '@davidlj95/ngx-meta/routing'
@NgModule({
// ...
imports: [
// ...
NgxMetaCoreModule.forRoot(),
NgxMetaRoutingModule.forRoot(),
],
// ...
})
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
-
Actually using the
NgxMetaService
APIs under the hood ↩