Search code examples
angularangular5amp-htmlangular-universal

append link amphtml to head in angular app

I have a working angular universal app and I have amp version of a specific page. To make amp page reachable I have to add into page's <head> this tag

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

So I need something similar to MetaService.

My question is how can I do this in a specific component of angular 5 app?

Solution

  • A more concise version of such a service would be this:

    import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class LinkService {

  constructor(@Inject(DOCUMENT) private doc: Document) { }

  createLink() {
    let link: HTMLLinkElement = this.doc.createElement('link');
    link.setAttribute('rel', 'amphtml');
    link.setAttribute('href', 'https://www.example.com/url/to/amp/document.html');
    this.doc.head.appendChild(link);
  }
}

    Source: https://www.concretepage.com/angular/angular-title-service-and-canonical-url