Dynamically added meta tags are not showing images, description and title when I share a link on WhatsApp. (Angular 2)

I can set the meta tag dynamically and when I inspect the element then I can see those meta tags but when I share the link (where I set meta tag dynamically) via whats-app then description, title, and image are not showing. Can anyone suggest to me that where I am wrong? I am working on Angular 2.

this is how I set the meta tag in the component.

var link = <HTMLMetaElement>document.createElement('meta');
link.setAttribute('property', 'og:url');
link.content = "https://www.test.com/";
document.getElementsByTagName('head')[0].appendChild(link);
var link = <HTMLMetaElement>document.createElement('meta');
link.setAttribute('property', 'og:description');
link.content = "test description";
document.getElementsByTagName('head')[0].appendChild(link);
var link = <HTMLMetaElement>document.createElement('meta');
link.setAttribute('property', 'og:image');
link.content = "https://imgurl";
document.getElementsByTagName('head')[0].appendChild(link);

Dynamic adding/changing of meta tags on client side will have no effect. This is because Facebook, twitter, whatsapp, etc. do not run the scripts in order to create rich object link.

If your web app requires to do the same, you should do such rendering on the server side. An angular app can be changed to server side rendering by running the command ng add @angular/universal

Then on a page level component, use the service called Meta. Angular Meta service documentation