Setting Title Tag for Angular Applications

Due to the nature of Angular apps being SPAs (single page application), historically, changing title tag or meta tags are not supported by default. However, due to SEO reasons, these features were added and works best when used in Angular Universal.

Angular has the Title service from the platform-browser package. This service can be used to get or set the title of the current HTML document.

I have just recently added custom title tag for my portfolio site. Here is an example (tested in Angular 6).

import { Component } from '@angular/core';
import { Title } from "@angular/platform-browser";

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html'
})

export class AboutComponent {
  constructor(private titleService: Title) {
    this.titleService.setTitle('Lysender - About');
  }
}

We can then set titles for all of our pages this way. As other developers noted, it is possibly to change the title at router level but currently, I’m not interested on exploring that possibility.

That’s it! Meta tags next!