ngx-metafrenzy
This angular module will provide help in dynamically setting the head-tags such as meta/link/title. It works with server-side rendering!
Requirements
Older versions of Angular:
- use v7.0.0 for Angular 12
- use v6.0.0 for Angular 10
- use v5.1.0 for Angular 9
- use v4.1.0 for Angular 8
- use v3.2.0 for Angular 7
- use v2.4.1 for Angular 6
Installation
$ npm install ngx-metafrenzy
or
$ yarn add ngx-metafrenzy
Usage
Setup the NgModule first. Always import MetafrenzyModule. Import MetafrenzyGuard if you want to use the guard functionality. See the data section in the example below for more on the syntax.
import { MetafrenzyModule, MetafrenzyGuard } from 'ngx-metafrenzy';
@NgModule({
declarations: [AppComponent],
imports: [
...
MetafrenzyModule.forRoot(),
RouterModule.forRoot([
{
path: '',
component: AppComponent,
canActivate: [MetafrenzyGuard],
data: {
metafrenzy: {
title: 'My Title',
tags: [
{
name: 'og:title',
content: 'My title'
}, {
name: 'og:description',
content: 'My description'
}
],
links: [
{
rel: 'canonical',
href: 'http://localhost/'
}
]
}
}
}
])
...
],
...
})
When navigating between routes you can also add "canDeactivate" to the data object. This will try to reset the metatags, which were set in the previous route. Use this with caution as you might remove tags, which should be global or not removed. See remove-functions in the service class to remove single tags.
...
canDeactivate: [MetafrenzyGuard],
...
You can use the service class MetafrenzyService in any component. See example below:
import { MetafrenzyService } from 'ngx-metafrenzy';
@Component({
...
})
export class AppComponent {
constructor(private readonly metafrenzyService: MetafrenzyService) {
this.metafrenzyService.setTitle('My title');
this.metafrenzyService.setMetaTag('og:title', 'My title');
this.metafrenzyService.setLinkTag({
rel: 'canonical',
href: 'http://localhost/'
});
}
}
As shown above the title can be set using setTitle and a meta tag using setMetaTag with the content as parameters. The link tag is a little different since you pass an object to match all possible variations of attributes on the link tag. Properties in this link object could be:
charset, crossorigin, href, hreflang, media, rel, rev, sizes, target, type
Service class functions
setTitle('')
getTitle()
setMetaTag('')
getMetaTag('')
removeMetaTag('')
setMetaCharsetTag('')
setLinkTag({
charset: '';
crossorigin: '';
href: '';
hreflang: '';
media: '';
rel: '';
rev: '';
sizes: '';
target: '';
type: '';
})
removeLinkTags(() => true);
setAllTitleTags('')
setAllDescriptionTags('')
setCanonical('')
setRobots('')
setOpenGraph({
title: '',
description: '',
type: '',
url: '',
image: '',
site_name: ''
});
setTags({
title: '',
description: '',
url: '',
robots: '',
image: ''
});
Docker
For development in a docker container run:
$ docker-compose up --build -d
And go to http://localhost:4200
License
This package is open-sourced software licensed under the MIT license