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.

Providing default values

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

This is the default for apps generated with Angular CLI before v17

Open your app.module.ts where NgxMetaCoreModule is imported. Provide your default values by calling NgxMetaCoreModule.forRoot with the options object.

app.module.ts

@NgModule({
  // ...
  imports: [
    // ...
    NgxMetaCoreModule.forRoot({
      defaults: {
        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

This is the default for apps generated with Angular CLI v17 and above

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

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