CODEWITHSUNDEEP
javascripthtmlangularjs
Lahiru Gambheera
Lahiru Gambheera

Reputation: 421

How to change meta tag content in angularjs single page applications?

I'm developing a single page application using angularjs. I want to change the content of meta tags of the parent page.

I used following codes to do it.

document.getElementsByTagName("META")[5].content = "The title is here";
document.getElementsByTagName("META")[6].content = "This is the description";
document.getElementsByTagName("META")[7].content = document.getElementById("ImgResult").src;

This code is working and I observed it in console. But if view the source of the page, The meta tags are not changed.

Please help me to solve this.

Upvotes: 0

Views: 691

Answers (2)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Source code of page is static document, it will not persist your changes, but viewing DOM will show you that tags are indeed changed, you can verify it by 

//open chrome(or whatever) dev tools, try it right now, in this website
//write below lines in console
document.getElementsByTagName("META")[0].content = "The title is here";
console.log(document.getElementsByTagName("META")[0]);
//switch to Elements tab, find first meta, value is changed

Viewing source code of page is not that much useful, as many web pages changes its contents by jquery or angular

Upvotes: 0

ErikAGriffin
ErikAGriffin

Reputation: 739

When you are viewing the "source code", you are seeing the html files as they were when initially fetched from the server.

So any changes at all will never be reflected there. If you do "inspect element" instead, that will show updated content.

For example many angular applications use ui router or ng-router to display views. If you view 'page source' on these pages, you will only see the element that will be replaced by the view, and none of the actual html from the view.

Upvotes: 1

Related Questions