In angular 2 how to make a canonical tag dynamic on a page

Question

In angular 2, how to make a canonical tag on a page.

This is the tag of my index page:

  <link rel="canonical" href="https://mywebsite.co.uk" />

How can I make it dynamic, for example. if on a blog page it should look like this at runtime:

  <link rel="canonical" href="https://mywebsite.co.uk/blog" />

I am using angular version 4, webpack and typescript with ng2 metadata to change the name, description and keywords of all my urls.

I just need the canonical change tag for the Google bot.