@replayvalue/meta-man v0.2.1

MetaMan

MetaMan is short for Metatag Manager, and is a simple library to help keep the header tags in your Angular application in sync with the current route state.

Installation

npm install --save @replayvalue/meta-man

Compatibility

Use version ^0.1.0 for Angular 10 and >=0.2.0 for Angular 11+.

Usage

Module

The MetaManModule must be added to your AppModule and configured with the forRoot method:

import { MetaManModule } from "@replayvalue/meta-man";

@NgModule({
  imports: [
    // In order for MetaMan to work most effectively, paramsInheritance strategy can
    // be set to 'always' for RouterModule. This allows you do reduce title and description
    // duplication for routes that share values.
    RouterModule.forRoot(routes, { paramsInheritanceStrategy: "always" }),
    MetaManModule.forRoot({
      baseTitle: "Replay Value",
      host: "https://getreplayvalue.com",
      includeTwitter: true,
    }),
  ],
})
export class AppModule {}

The supported configuration parameters are:

Component

To listen to route changes and update meta tags, you must called MetaManService.listenForRouteChanges in your AppComponent.

import { MetaManService } from "@replayvalue/meta-man";

export class AppComponent implements OnInit {
  private _album: Array = [];
  constructor(
    private readonly route: ActivatedRoute,
    private readonly metaManService: MetaManService
  ) {}

  ngOnInit(): void {
    this.metaManService.listenForRouteChanges(this.route);
  }
}

How does it work?

MetaMan will listen to the routing events from the Angular Router, and on the NavigationEnd event, it pulls title and metatag properties from the current ActivatedRouteSnapshot.data, and updates the title and metatags of your application. Below is the mapping of ActivatedRouteSnapshot.data properties to metatags.

License

MIT