Anil Verma
Creator
\
In Angular applications, we usually see the same title and meta tag along with all pages.
\
So the problem is, can we update or set different titles and meta tags in the angular applications?
\
The answer is Yes. But How?
\n This article is all about setting/updating different titles and meta tags along with all pages.
\
Title
To set different “Title” on the page(head section)
\
Step 1-
import { Title} from '@angular/platform-browser';
\
Step 2-
public constructor(private titleService: Title) { }ngOnInit() {
this.titleService.setTitle("your page title");
}
\
Same steps you can repeat on different pages where you want to set new Title of Page
\
\
Meta
To set/update different “Meta” on the page(head section)
\
Step 1-
import { Meta} from '@angular/platform-browser';
\
Step 2-
public constructor(private metaService: Meta) { }
\
\
Add New Meta Tags
ngOnInit() {
this.metaService.addTags([
{name: 'keywords', content: 'your keywords content'},
{name: 'description', content: 'your page description content'},
]);
}
\
\
Update Meta Tag
ngOnInit() {
this.metaService.updateTag({ name: 'keywords', content: 'your updated keywords content'});
}
\
\
Remove Meta Tag
ngOnInit() {
this.metaService.removeTag({ name: 'keywords', content: 'your updated keywords content'});
}
\
\
Happy Learning….👏👏👏👏
