Struggling to change the document title on a specific route. The route is initially set with a default title.
{
path: 'artikel/:id/:slug',
component: ArticleComponent,
data: {title: 'Article', routeType: RouteType.ARTICLE,
description: metaDescription},
resolve: {error: ErrorResolverService, article: ArticleResolveService},
}
The approach involves using an ArticleResolverService to fetch the article based on the ID and updating the Title.
resolve(route: ActivatedRouteSnapshot): Observable<Article> {
let id = route.paramMap.get('id');
return this.as.getArticle(id).take(1).map(article => {
if (article) {
//temporary title change causing flickering
this.ts.setTitle(article.title);
return article;
}
return null;
});
}
After the previous method failed, the next step was to set the title within the ArticleComponent, which corresponds to the route. (This occurs in ngOnInit)
this.route.data.subscribe((data:{article: Article}) => {
this.article = data.article;
//temporary title change causing flickering
this.ts.setTitle(this.article.title);
//setting title permanently via browser console
window['setTitle'] = (t) => this.ts.setTitle(t);
});
No matter what I try, every time the page loads, there is a moment where the desired title is visible but then quickly reverts back to the default title (or URL when no default title is set), immediately after displaying the desired title momentarily.
What is the most effective way to set a permanent title for this particular page?