{ "id": "guide/set-document-title", "title": "Set the document title", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n \n

Set the document titlelink

\n

Your app should be able to make the browser title bar say whatever you want it to say.\nThis cookbook explains how to do it.

\n

See the .

\n

The problem with <title>link

\n

The obvious approach is to bind a property of the component to the HTML <title> like this:

\n\n <title>{{This_Does_Not_Work}}</title>\n\n

Sorry but that won't work.\nThe root component of the application is an element contained within the <body> tag.\nThe HTML <title> is in the document <head>, outside the body, making it inaccessible to Angular data binding.

\n

You could grab the browser document object and set the title manually.\nThat's dirty and undermines your chances of running the app outside of a browser someday.

\n
\n

Running your app outside a browser means that you can take advantage of server-side\npre-rendering for near-instant first app render times and for SEO. It means you could run from\ninside a Web Worker to improve your app's responsiveness by using multiple threads. And it\nmeans that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.

\n
\n

Use the Title servicelink

\n

Fortunately, Angular bridges the gap by providing a Title service as part of the Browser platform.\nThe Title service is a simple class that provides an API\nfor getting and setting the current HTML document title:

\n\n

You can inject the Title service into the root AppComponent and expose a bindable setTitle method that calls it:

\n\nexport class AppComponent {\n public constructor(private titleService: Title) { }\n\n public setTitle(newTitle: string) {\n this.titleService.setTitle(newTitle);\n }\n}\n\n\n

Bind that method to three anchor tags and voilà!

\n
\n \"Set\n
\n

Here's the complete solution:

\n\n \nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n\n\n\n \nimport { NgModule } from '@angular/core';\nimport { BrowserModule, Title } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n imports: [\n BrowserModule\n ],\n declarations: [\n AppComponent\n ],\n providers: [\n Title\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n\n \n// Import the native Angular services.\nimport { Component } from '@angular/core';\nimport { Title } from '@angular/platform-browser';\n\n@Component({\n selector: 'app-root',\n template: `\n <p>\n Select a title to set on the current HTML document:\n </p>\n\n <ul>\n <li><a (click)=\"setTitle('Good morning!')\">Good morning</a>.</li>\n <li><a (click)=\"setTitle('Good afternoon!')\">Good afternoon</a>.</li>\n <li><a (click)=\"setTitle('Good evening!')\">Good evening</a>.</li>\n </ul>\n `,\n})\nexport class AppComponent {\n public constructor(private titleService: Title) { }\n\n public setTitle(newTitle: string) {\n this.titleService.setTitle(newTitle);\n }\n}\n\n\n\n\n

Why provide the Title service in bootstraplink

\n

Generally you want to provide application-wide services in the root application component, AppComponent.

\n

This cookbook recommends registering the title service during bootstrapping,\na location you reserve for configuring the runtime Angular environment.

\n

That's exactly what you're doing.\nThe Title service is part of the Angular browser platform.\nIf you bootstrap your application into a different platform,\nyou'll have to provide a different Title service that understands\nthe concept of a \"document title\" for that specific platform.\nIdeally, the application itself neither knows nor cares about the runtime environment.

\n\n \n
\n\n\n" }