A tool for updating meta tags in an Angular application.
npm i ngmeta
First import the NgMeta
as a provider
into your app.
import { NgMeta } from 'ngmeta';
...
@NgModule({
providers: [
NgMeta
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
To dynamically edit this data whenever a page is loaded. Import NgMeta
into your component, then inside of your constructor pass in the NgMeta
service as an argument.
import { NgMeta } from 'ngmeta';
...
export class AppComponent {
constructor(private ngmeta: NgMeta) {}
}
Then in the component we can call our NgMeta
service this.ngmeta.setHead()
. This takes an object of the new values for the tags you want. Below we change the title and description data on a page.
this.ngmeta.setAll({
title: "Google",
description:
"Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
});
Now our head data will display
<head>
<title>Google</title>
<meta
name="description"
content="Search the world's information, including
webpages, images, videos and more. Google has many special features to help
you find exactly what you're looking for."
/>
</head>
Full documentation for the NGMeta service is available here.
Changes happen, check out the changelog to see the latest changes.