Currently, I have a situation where the product listing and product detail view are displayed on the same component. Initially, the product listing is shown on page load and upon clicking a specific product, the product listing is hidden while the product detail view is revealed using *ngIf.
However, I am now faced with the task of setting Meta tags for both views.
When the page initially loads, I set Meta tags for the product listing with generic information:
ngOnInit(): void {
if(!this.route.snapshot.queryParams['productId']){
this.utils.updateMetaTags('Harvesting farmer network - buy direct from farmer', 'Helping farmers in India sell their crops!', this.route.url, 'assets/images/logo.svg');
}
}
Now, when a user clicks on a product from the product listing, I need to update the Meta data with specific product details.
getFeedById(){
this.utils.updateMetaTags(this.title, this.singleItemFeed?.description || 'Helping farmers in India sell their crops!', this.router.url, this.singleItemFeed.images[0]?.url);
}
The issue at hand is that while I am able to successfully set the initial Generic Meta tags, they do not update for individual products.
Important Points: Angular Version: 11.0.2, Angular Universal Implemented
Is there a way to update Meta data multiple times for a component based on events such as clicks, without having to reload the entire page?