2017-02-22 13:09:39 -05:00
@title
Set the Document Title
@intro
Setting the document or window title using the Title service.
@description
{@a top}
2017-03-31 19:57:13 -04:00
2017-04-12 15:53:18 -04:00
Your app should be able to make the browser title bar say whatever you want it to say.
2017-03-31 19:57:13 -04:00
This cookbook explains how to do it.
2017-04-12 15:53:18 -04:00
See the < live-example name = "cb-set-document-title" > < / live-example > .
2017-02-22 13:09:39 -05:00
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< table >
< tr >
< td >
2017-03-31 19:57:13 -04:00
To see the browser title bar change in the live example,
open it again in the Plunker editor by clicking the icon in the upper right,
then pop out the preview window by clicking the blue 'X' button in the upper right corner.
2017-02-22 13:09:39 -05:00
< / td >
< td >
2017-03-31 19:57:13 -04:00
< img src = 'assets/images/devguide/plunker-switch-to-editor-button.png' width = "200px" height = "70px" alt = "pop out the window" align = "right" > < / img > < br > < / br > < img src = 'assets/images/devguide/plunker-separate-window-button.png' width = "200px" height = "47px" alt = "pop out the window" align = "right" > < / img >
2017-02-22 13:09:39 -05:00
< / td >
< / tr >
< / table >
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
## The problem with *<title>*
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< code-example format = '' >
< title> {{This_Does_Not_Work}}< /title>
< / code-example >
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
Sorry but that won't work.
2017-04-12 15:53:18 -04:00
The root component of the application is an element contained within the `<body>` tag.
2017-02-22 13:09:39 -05:00
The HTML `<title>` is in the document `<head>` , outside the body, making it inaccessible to Angular data binding.
2017-04-12 15:53:18 -04:00
You could grab the browser `document` object and set the title manually.
That's dirty and undermines your chances of running the app outside of a browser someday.
2017-03-27 11:08:53 -04:00
2017-04-10 11:51:13 -04:00
< div class = "l-sub-section" >
2017-03-27 11:08:53 -04:00
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
Running your app outside a browser means that you can take advantage of server-side
pre-rendering for near-instant first app render times and for SEO. It means you could run from
inside a Web Worker to improve your app's responsiveness by using multiple threads. And it
means that you could run your app inside Electron.js or Windows Universal to deliver it to the desktop.
2017-03-27 11:08:53 -04:00
2017-04-10 11:51:13 -04:00
< / div >
2017-03-27 11:08:53 -04:00
2017-03-31 19:57:13 -04:00
2017-02-22 13:09:39 -05:00
## Use the *Title* service
Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform* .
2017-03-11 10:36:40 -05:00
The [Title ](api/platform-browser/index/Title-class ) service is a simple class that provides an API
2017-02-22 13:09:39 -05:00
for getting and setting the current HTML document title:
2017-04-12 15:53:18 -04:00
* `getTitle() : string` — Gets the title of the current HTML document.
* `setTitle( newTitle : string )` — Sets the title of the current HTML document.
2017-02-22 13:09:39 -05:00
2017-04-12 15:53:18 -04:00
You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
2017-02-22 13:09:39 -05:00
2017-03-31 19:57:13 -04:00
< code-example path = "cb-set-document-title/src/app/app.component.ts" region = "class" title = "src/app/app.component.ts (class)" linenums = "false" >
2017-03-27 11:08:53 -04:00
< / code-example >
2017-02-22 13:09:39 -05:00
2017-03-31 19:57:13 -04:00
2017-04-12 15:53:18 -04:00
Bind that method to three anchor tags and voilà!
2017-03-30 15:04:18 -04:00
2017-02-22 13:09:39 -05:00
< figure class = 'image-display' >
2017-03-31 19:57:13 -04:00
< img src = "assets/images/cookbooks/set-document-title/set-title-anim.gif" alt = "Set title" > < / img >
2017-02-22 13:09:39 -05:00
< / figure >
2017-03-31 19:57:13 -04:00
2017-04-12 15:53:18 -04:00
Here's the complete solution:
2017-02-22 13:09:39 -05:00
2017-03-27 11:08:53 -04:00
< code-tabs >
< code-pane title = "src/main.ts" path = "cb-set-document-title/src/main.ts" >
< / code-pane >
< code-pane title = "src/app/app.module.ts" path = "cb-set-document-title/src/app/app.module.ts" >
2017-02-22 13:09:39 -05:00
2017-03-27 11:08:53 -04:00
< / code-pane >
2017-02-22 13:09:39 -05:00
2017-03-27 11:08:53 -04:00
< code-pane title = "src/app/app.component.ts" path = "cb-set-document-title/src/app/app.component.ts" >
2017-02-22 13:09:39 -05:00
2017-03-27 11:08:53 -04:00
< / code-pane >
2017-02-22 13:09:39 -05:00
2017-03-27 11:08:53 -04:00
< / code-tabs >
2017-02-22 13:09:39 -05:00
2017-03-31 19:57:13 -04:00
2017-04-12 15:53:18 -04:00
## Why provide the *Title* service in *bootstrap*
2017-02-22 13:09:39 -05:00
2017-04-12 15:53:18 -04:00
Generally you want to provide application-wide services in the root application component, `AppComponent` .
2017-02-22 13:09:39 -05:00
2017-04-12 15:53:18 -04:00
This cookbook recommends registering the title service during bootstrapping,
a location you reserve for configuring the runtime Angular environment.
2017-02-22 13:09:39 -05:00
2017-04-12 15:53:18 -04:00
That's exactly what you're doing.
2017-02-22 13:09:39 -05:00
The `Title` service is part of the Angular *browser platform* .
2017-04-12 15:53:18 -04:00
If you bootstrap your application into a different platform,
you'll have to provide a different `Title` service that understands
the concept of a "document title" for that specific platform.
Ideally, the application itself neither knows nor cares about the runtime environment.
2017-03-31 19:57:13 -04:00
[Back to top ](guide/set-document-title#top )
