WrMeta

import { provideWrMeta, WrMeta } from 'ngwr/meta';

bootstrapApplication(AppComponent, {
  providers: [
    provideWrMeta({
      titleTemplate: '{{ title }} · NGWR',
      og: { siteName: 'NGWR', type: 'website' },
      twitter: { card: 'summary_large_image', creator: '@thekhegay' },
    }),
  ],
});

private readonly meta = inject(WrMeta);

ngOnInit() {
  const handle = this.meta.push({
    title: 'Pricing',
    description: 'Plans for every team.',
    og: { image: '/og/pricing.png' },
  });
  this.destroyRef.onDestroy(() => handle.pop());
}

<!-- Auto-pops on destroy. Perfect for route components. -->
<div [wrMeta]="{ title: 'Pricing', description: 'Plans for every team.' }">
  …
</div>

private readonly meta = inject(WrMeta);
private readonly i18n = inject(WrI18n);

ngOnInit() {
  // `i18n.t(...)` tracks the active locale, so the document title
  // re-renders automatically whenever the language changes — no
  // manual re-set on `NavigationEnd` or a locale subscription.
  const handle = this.meta.bind(() => ({
    title: this.i18n.t('home.title'),
    description: this.i18n.t('home.description'),
  }));
  this.destroyRef.onDestroy(() => handle.pop());
}