Updating meta tags for SEO using angular universal

Question

I am building an angular universal + angular 2 website and i want to add the social media share button. I implemented the server side rendering and i also update the meta tags necessary using the following code :

 constructor(private dataService: DataService,
private activatedRoute: ActivatedRoute,
private auth: AuthService,
private router : Router,
private meta : Meta) {

this.currentUrl = window.location.href;
// testing if it changes something to add that outside of the service : it didnt
this.meta.updateTag({ property: 'og:title', content: "my new title" })



let id= this.activatedRoute.snapshot.paramMap.get('id');
this.dataService.getDataById(id).snapshotChanges().take(1)
.switchMap(result => {

console.log("slug switchmap")
let payloadValue = result[0].payload.val();

// facebook meta 
this.meta.updateTag({ property: 'og:url', content: this.currentUrl })
this.meta.updateTag({ property: 'og:title', content: payloadValue.title })
this.meta.updateTag({ property: 'og:description', content: payloadValue.description })
this.meta.updateTag({ property: 'og:image', content: 
 payloadValue.photoUrl })


return result;
})
 .subscribe(params => {

console.log(params)



    });
}

I am using firebase as my hosting and the sharing is not working ( it just shares with the default value i entered ) . the interesting part is, if i inspect element in the browser i see the updated meta tags, but if view the page source, i see the default value of my tags not the updated one. Any idea how to update the metatags dynamically ?

Update : I think the problem is coming from the fact that the constructor function ends before the call of the subscribe method that gets the values for the meta ends. And once the constructor is done I don't think you can change the meta tags. is there a way around that ?