Get started

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

➕ 1. Install

ng add @davidlj95/ngx-meta

Or just use your package manager's install command¹

⚙️ 2. Setup

Let's add the library to your Angular site and set some standard <meta> tags.

For standalone, module-free appsFor non-standalone, module-based apps

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 and add at least the core provider to the providers section. If you want to set metadata in each route's data using Angular's Router, add the routing provider too. In order to set some standard <meta>s, let's add the standard module provider.

app.config.ts

import {provideNgxMetaCore} from '@davidlj95/ngx-meta/core'
import {provideNgxMetaRouting} from '@davidlj95/ngx-meta/routing'
import {provideNgxMetaStandard} from '@davidlj95/ngx-meta/standard'

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

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 file and add at least the core module to the imports section. If you want to set metadata in each route's data using Angular's Router, add the routing module too. In order to set some standard <meta>s, let's add the standard module.

app.module.ts

import {NgxMetaCoreModule} from '@davidlj95/ngx-meta/core'
import {NgxMetaRoutingModule} from '@davidlj95/ngx-meta/routing'
import {NgxMetaStandardModule} from '@davidlj95/ngx-meta/standard'

@NgModule({
  // ...
  imports: [
    // ...
    NgxMetaCoreModule.forRoot(),
    NgxMetaRoutingModule.forRoot(),
    NgxMetaStandardModule,
  ],
  // ...
})
export class AppModule {}

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

Lazy load them if you want!

You can load metadata modules (like Open Graph module) later. They can be lazy loaded too actually. So if you don't need all metadata modules to be available in all your app, you can reduce the main bundle size by loading some later. Check out the late loading modules guide for more information

🏷️ 3. Set some metadata

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

Using route's data

If you added the routing module / provider, 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.

---

1. The library doesn't include any schematics for now ↩