Angular 6 - 有条件地更改HTML标头中元素的属性

Question

I recently found out that you can alter Chromes header on Android by putting this in the HTML header.

<meta name="theme-color" content="#1ee078">

This works perfectly. But I want the content color to be dynamic based on the current theme.

How would you make the color of this meta tag dynamic, if you would have the current theme color as a variable in eg the AppComponent ?

Answer 1

Within Angular there is a built in API to edit meta tags. @angular/platform-browser/meta

You can use the updateTag function.

You should be able to do something like;

import { Meta } from '@angular/platform-browser';

constructor(
  private meta: Meta
) { }

ngOnInit() {
  this.meta.updateTag({ 
    name: 'theme-color', 
    content: '#1ee078' 
  });
}

Answer 2

You could try this one. Depending on your page, it might work. :)

var meta=document.createElement('meta');
meta.name='theme-color';

meta.setAttribute('content', '#1ee078');

document.getElementsByTagName('head')[0].appendChild(meta);