Skip to content

Ngx meta.ngxmetaelementsservice.set

Home > @davidlj95/ngx-meta > NgxMetaElementsService > set

NgxMetaElementsService.set() method

Creates, updates or removes some kind of <meta> elements inside <head> in a declarative fashion.

API is in alpha state. But appears as beta due a tooling limitation

Kind of <meta> elements to manage are identified by an HTML attribute providing its metadata name. For instance, to manage description metadata elements (<meta name="description">) on the page, the name attribute with description value identifies them.

Then, contents for those can be specified. In the shape of a key/value JSON object declaring each element's additional attributes. Mainly content named attributes. See NgxMetaElementAttributes. If no contents are provided, all <meta> elements of that kind will be removed. An array of contents may be given to create multiple <meta> elements with same kind.

Signature:

set(nameAttribute: NgxMetaElementNameAttribute, content: ReadonlyArray<NgxMetaElementAttributes> | NgxMetaElementAttributes | undefined): void;

Parameters

Parameter Type Description
nameAttribute NgxMetaElementNameAttribute Attribute use to identify which kind of <meta> elements to manage. As an array with the attribute name in first position and attribute value in second one. Utility functions exist to generate arrays for common name attributes. See withNameAttribute() and withPropertyAttribute() helpers to create those arrays without repeating attribute names around.
content ReadonlyArray<NgxMetaElementAttributes> | NgxMetaElementAttributes | undefined Content(s) attributes to set for this <meta> elements kind. Or the lack of them to remove all <meta> elements of this kind. See withContentAttribute helper for creating content objects.

Returns:

void

Example

Setting <meta name="description" content="Cool page"/>

ngxMetaElementsService.set(
  withNameAttribute('description'), // same as `['name','description']`
  withContent('Cool page'), // same as `{content:'Cool page'}`
)
Utility functions withNameAttribute() and withContentAttribute help creating the name attribute identifying the kind of meta elements and the contents to provide for it.

withContentAttribute helps to create the attributes key / value object.

Removing any <meta name="description"/> existing elements

ngxMetaElementsService.set(
  withNameAttribute('description'), // same as `['name','description']`
  undefined, // same as `withContent(undefined)`
)
Setting many <meta name="theme-color"/> elements

ngxMetaElementsService.set(
  withNameAttribute('theme-color'), // same as `['name','theme-color']`
  [
    withContent('darkblue', { media: "(prefers-color-scheme: dark)" }),
    withContent('lightblue') // same as `{content:'lightblue'}`
  ]
)
Removing any <meta name="theme-color"/> existing elements

ngxMetaElementsService.set(
  withNameAttribute('theme-color'), // same as `['name','theme-color']`
  [], // `undefined` is valid too
)
Attribute name helpers:

Content helpers: