import { Component } from '@angular/core';
import { WrMeta, WrMetaBinding } from 'ngwr/meta';
@Component({ imports: [WrMetaBinding] })
export class MyComponent {}WrMeta
Set the page title, description and social tags, and restore them when a page leaves.
Installation
Import the class. This entry point has no stylesheet.
Push / pop
push() returns a handle; pop() on it restores what was underneath.
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());
}Directive form
[wrMeta] pushes on init and pops on destroy, so nothing has to undo it.
<div [wrMeta]="{ title: 'Pricing', description: 'Plans for every team.' }">
…
</div>Reactive title (i18n)
bind() re-applies whenever a signal its factory reads changes, such as the locale.
private readonly meta = inject(WrMeta);
private readonly i18n = inject(WrI18n);
ngOnInit() {
const handle = this.meta.bind(() => ({
title: this.i18n.t('home.title'),
description: this.i18n.t('home.description'),
}));
this.destroyRef.onDestroy(() => handle.pop());
}App-wide defaults
withMeta() sets the title template and the defaults every page starts from; reset() returns to them.
import { provideWr } from 'ngwr';
import { withMeta } from 'ngwr/meta';
providers: [
provideWr(
withMeta({
titleTemplate: '{{ title }} · My app',
description: 'What the app does, in one line.',
og: { siteName: 'My app', type: 'website' },
twitter: { card: 'summary_large_image' },
}),
),
],API
| Name | Description | Type | Default |
|---|---|---|---|
set(config) | Replace the current top of the stack. | (config: WrMetaConfig) => void | — |
push(config) | Push a layer. Returns { pop }. | (config: WrMetaConfig) => WrMetaHandle | — |
bind(factory) | Push a layer that re-applies when a signal read in factory changes. Returns { pop }. | (factory: () => WrMetaConfig) => WrMetaHandle | — |
pop() | Pop the most recently pushed layer. | () => void | — |
reset() | Clear every layer and restore the withMeta() defaults. | () => void | — |
current() | A snapshot of <head> now. Not a signal: a template should read resolved(). | () => Readonly<WrMetaConfig> | — |
resolved() | The merged configuration as a signal. | Signal<WrMetaConfig> | — |
[wrMeta] | Pushes on init, re-pushes on change, pops on destroy. | WrMetaConfig | — |