Title formatting

Sometimes you may want to specify your site name or brand name in every page of your website¹. If that's the case, you may find yourself formatting page titles around every time:

const BRAND = 'ACME Corp.'
const titleFormatter = (title: string) => `${title} - ${BRAND}`
// 👇 This can be repetitive
const productsPageMetadata = {
  title: titleFormatter('Products'),
} satisfies GlobalMetadata

If that's the case, don't worry, we're here to help 🎉

Setup

You can provide a title formatting function to the library. Then, the built-in metadata managers that handle titles will call it to format the title before placing it as your title metadata.

To provide the title formatter function:

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

Add withNgxMetaTitleFormatter as a provideNgxMetaCore feature to your standalone app's app.config.ts file providers.

app.config.ts

import {provideNgxMetaCore, withNgxMetaTitleFormatter} from '@davidlj95/ngx-meta/core';

export const appConfig: ApplicationConfig = {
  // ...
  providers: [
    // ...
    provideNgxMetaCore(
      withNgxMetaTitleFormatter(
        (title) => `${title} - ACME Corp.`
      )
    ),
    // ...
  ],
}

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.

Add withNgxMetaTitleFormatter as a provideNgxMetaCore feature in the app's app.module.ts file.

app.module.ts

import {provideNgxMetaCore, withNgxMetaTitleFormatter} from '@davidlj95/ngx-meta/core';

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(
      withNgxMetaTitleFormatter(
        (title) => `${title} - ACME Corp.`
      )
    ),
    // ...
  ],
  // ...
})
export class AppModule {}

Usage

That's it! When you set your metadata, the title formatter will be called before placing its output as the page's metadata. For instance, following the previous example:

const metadata = {
  title: 'Products',
} satisfies GlobalMetadata

After the example setup, title metadata manager will use Products - ACME Corp. as page title to set.

To see which title metadata managers will use the formatter, check out withNgxMetaTitleFormatter API docs

See Standard.title metadata "See also" additional resources for more info ↩