Defaults

If you want every page in your site to have some metadata values, a good option is to use the defaults feature.

This way, everytime you set your metadata values (either using the service or the route's data), if no value is provided for some metadata, default value will be used instead.

Remember to either use the routing module or call the service

As defaults are applied when setting metadata values. So if no metadata values are being set, no defaults will be applied. Metadata values can be set using the service or when navigating to a new route when using routing

Providing default values

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 where provideNgxMetaCore is provided.

Provide your default values by adding a call to withNgxMetaDefaults with the default values to set.

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNgxMetaCore(
      withNgxMetaDefaults({
        description: "Awesome products made real ✨"
      } satisfies GlobalMetadata)
    ),
  ],
}

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.

Provide your default values by adding a call to withNgxMetaDefaults with the default values to set.

app.module.ts

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(
      withNgxMetaDefaults({
        description: "Awesome products made real ✨"
      } satisfies GlobalMetadata)
    ),
  ],
  // ...
})
export class AppModule {}

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

Notice how the Typescript's satisfies operator helps again ensuring the metadata values JSON matches the expected shape. For more information check metadata values JSON guide

Next steps

Library comes with some built-in modules to help you set common metadata for websites. What modules are there and what metadata they provide? Check out next section about built-in modules!

If you want to optimize your main bundle size, take a look at late loading modules guide