Get started

Glad you're here 🥰 Let's set it up in 3 steps ⚡️

➕ 1. Install and setup

ng add @davidlj95/ngx-meta

The command will install the library and add ask you if you want to set up the routing module to set metadata values in Angular routes' data.

Then, to set some metadata to get started, choose at least the standard module.

Select just the metadata modules you need

In order to reduce the bundle size. You can also lazy load them later if you don't need to setup some metadata until the user reaches a specific page.

You can set it up manually too

Check out the manual setup guide for more information.

🏷️ 2. Set some metadata

2.1 Using the service

Open a component file that is rendering a page / route. Inject the NgxMetaService service. And call the NgxMetaService.set API to set the metadata. For instance, in ngOnInit:

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

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

  ngOnInit(): void {
    this.ngxMetaService.set({
      title: 'Cool page',
      description: '⚠️ Contains awesomeness',
      standard: {
        keywords: ['cool', 'awesomeness'],
      },
    } satisfies 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.

Typescript's satisfies operator will help you write the proper JSON of metadata values to set. Take a look at metadata values JSON guide for more information about this values JSON.

Check out the example standalone app's all-meta-set-by-service.component.ts file for a full component file example

Metadata set by service won't be cleared by default

Those elements will be there even if you change the page unless the routing module is added.

See service guide about clearing metadata values for more information

2.2 Using route's data

If you added the library's routing module, you can set the metadata for a page using a route's data. For instance:

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

🗺️ Next steps

Want to learn more about how to set metadata using the service, the routing module or both of them at once? Check the service and routing module guides.

To know about how to properly define the metadata values to set, check out the metadata values JSON guide

If you already know about all that, maybe you want to explore the library's built-in modules that allow setting common metadata.

Otherwise, take a look at "Guides" section to learn about other features of the library. If looking for examples, you can always check out our example apps for some real examples on how to use the library.