angular-cn/aio/content/guide/set-document-title.md

{@a top}

# Set the Document Title

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

See the <live-example name="set-document-title"></live-example>.

## The problem with *&lt;title&gt;*

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

<code-example format=''>
  &lt;title&gt;{{This_Does_Not_Work}}&lt;/title&gt;
</code-example>

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

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.

<div class="alert is-helpful">

  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.

</div>

## Use the `Title` service

Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
The [Title](api/platform-browser/Title) service is a simple class that provides an API
for getting and setting the current HTML document title:

* `getTitle() : string`&mdash;Gets the title of the current HTML document.
* `setTitle( newTitle : string )`&mdash;Sets the title of the current HTML document.

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


<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>

Bind that method to three anchor tags and voilà!

<figure>
  <img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">
</figure>

Here's the complete solution:

<code-tabs>
  <code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>
  <code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>
  <code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>
</code-tabs>

## Why provide the `Title` service in `bootstrap`

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

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

That's exactly what you're doing.
The `Title` service is part of the Angular *browser platform*.
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.
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			`{@a top}`
build(aio): new migration 2017-04-01 01:57:13 +02:00
docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01:00			`# Set the Document Title`
build(aio): new migration 2017-04-01 01:57:13 +02:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`Your app should be able to make the browser title bar say whatever you want it to say.`
build(aio): new migration 2017-04-01 01:57:13 +02:00			`This cookbook explains how to do it.`

docs(aio): rename cb- files and a few others 2017-04-21 17:21:45 -07:00			`See the <live-example name="set-document-title"></live-example>.`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
			`## The problem with <title>`

			The obvious approach is to bind a property of the component to the HTML `<title>` like this:
docs(aio): ensure blank lines before HTML blocks in markdown 2017-03-30 20:04:18 +01:00
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			`<code-example format=''>`
			`<title>{{This_Does_Not_Work}}</title>`
			`</code-example>`

			`Sorry but that won't work.`
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			The root component of the application is an element contained within the `<body>` tag.
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			The HTML `<title>` is in the document `<head>`, outside the body, making it inaccessible to Angular data binding.

docs(aio): final migration from old site 2017-04-12 21:53:18 +02: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.`
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00
docs(aio): cleanup aalert, callout, subsection use and author style (#24986) PR Close #24986 2018-07-19 15:00:08 -07:00			`<div class="alert is-helpful">`
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00
docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01: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.`
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00
docs(aio): update to remark syntax 2017-04-10 16:51:13 +01:00			`</div>`
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00
docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01:00			## Use the `Title` service
build(aio): new migration 2017-04-01 01:57:13 +02:00
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			Fortunately, Angular bridges the gap by providing a `Title` service as part of the Browser platform.
docs(aio): fix lots of broken links Closes #16317 2017-04-30 22:10:32 +02:00			`The [Title](api/platform-browser/Title) service is a simple class that provides an API`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			`for getting and setting the current HTML document title:`

docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			* `getTitle() : string`—Gets the title of the current HTML document.
refactor(aio): move content-related images to `content/images/` 2017-04-26 15:11:02 +03:00			* `setTitle( newTitle : string )`—Sets the title of the current HTML document.
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			You can inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00

docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01:00			`<code-example path="set-document-title/src/app/app.component.ts" region="class" title="src/app/app.component.ts (class)" linenums="false"></code-example>`
build(aio): new migration 2017-04-01 01:57:13 +02:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`Bind that method to three anchor tags and voilà!`
docs(aio): ensure blank lines before HTML blocks in markdown 2017-03-30 20:04:18 +01:00
docs(aio): image sweep (#16609) * fix(aio): allow code blocks to clear floated images Previously the negative margin on the code headings were causing floated images to overlay the start of a code block. Now all code block successfully clear all floated elements. * feat(aio): add a `.clear` class for clearing floating images * fix(aio): tidy up image styles The css rules for `img.right` and `img.left` allow authors easy access to floating an image on the left or right, respectively. The `.image-display` rule which was always found on a figure has been simplified so that all figures have this styling. It is very unlikely that a figure will be used outside the content area; and at this time it seems like `figure` is as good an indicator that we want this kind of styling as anything. Now that images are all tagged with width and height values, we cannot assume to modify these dimensions via CSS as it can cause the image to lose its correct proportions. Until we find a better solition we must set `height` to `auto` when the screen width is below 1300px to ensure that these images maintain their proportions as they get shrunk to fit. * docs(aio): general tidy up of image HTML in guides Previously, the guides have a lot of inline image styling and unnecessary use of the `image-display` css class. Images over 700px are problematic for guide docs, so those have been given specific widths and associated heights. * docs(aio): use correct anchor for "back to the top" link The `#toc` anchor does not work when the page is wide enough that the TOC is floating to the side. * build(aio): add `#top-of-page` to path variants for link checking Since the `#top-of-page` is outside the rendered docs the `checkAnchorLinks` processor doesn't find them as valid targets for links. Adding them as a `pathVariant` solves this problem but will still catch links to docs that do not actually exist. * fix(aio): ensure that headings clear floated images * fix(aio): do not force live-example embedded image to 100% size This made them look too big, generally. Leaving them with no size means that they will look reasonable in large viewports and switch to 100% width in narrow viewports. 2017-05-09 23:53:32 +01:00			`<figure>`
			`<img src="generated/images/guide/set-document-title/set-title-anim.gif" alt="Set title">`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			`</figure>`

docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`Here's the complete solution:`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00			`<code-tabs>`
docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01:00			`<code-pane title="src/main.ts" path="set-document-title/src/main.ts"></code-pane>`
			`<code-pane title="src/app/app.module.ts" path="set-document-title/src/app/app.module.ts"></code-pane>`
			`<code-pane title="src/app/app.component.ts" path="set-document-title/src/app/app.component.ts"></code-pane>`
docs(aio): update migrated content from anguar.io 2017-03-27 16:08:53 +01:00			`</code-tabs>`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): tidy up docs that use float clearing Closes #16681 2017-05-18 21:31:27 +01:00			## Why provide the `Title` service in `bootstrap`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			Generally you want to provide application-wide services in the root application component, `AppComponent`.
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`This cookbook recommends registering the title service during bootstrapping,`
			`a location you reserve for configuring the runtime Angular environment.`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`That's exactly what you're doing.`
docs(aio): migrate content docs from angular.io This content was generated by a tool: https://github.com/petebacondarwin/aio-migrator 2017-02-22 18:09:39 +00:00			The `Title` service is part of the Angular browser platform.
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`If you bootstrap your application into a different platform,`
refactor(aio): move content-related images to `content/images/` 2017-04-26 15:11:02 +03:00			you'll have to provide a different `Title` service that understands
docs(aio): final migration from old site 2017-04-12 21:53:18 +02:00			`the concept of a "document title" for that specific platform.`
			`Ideally, the application itself neither knows nor cares about the runtime environment.`
build(aio): new migration 2017-04-01 01:57:13 +02:00