1101f07ef2
* boilerplate, gulpfile, quickstart * move ts files up to cookbooks * move rest of ts files * fix tsconfig, default build task, json file * fix js examples * fix webpack example * remove a2docs.css references * fix aot examples * fix webpack run task * fix cb-i18n * fix upgrade examples * fix unit tests * fix comment in deployment index * removed unused typings.json * fix plunkers * fix js example paths * fix ts quickstart/setup prose * add src folder note to setup * broadly replace app/ -> src/app/ * broadly replace main.ts * broadly replaced index.html * broadly replace tsconfig * replace systemjs * fix filetrees * Minor prose fixes to aot, i18n cookbooks * remove char harp was complaining about * update new reactive forms example * fix quickstart jade error * fix mistakes uncovered by CI * fix bad filename errors * edit style guide 04-06 rule to use src * add changelog * Incorporate Jesus's feedback * fix snippet headers in toh1/2 * chore: tweak changelog and setup text
93 lines
4.0 KiB
Plaintext
93 lines
4.0 KiB
Plaintext
include ../_util-fns
|
|
|
|
a(id='top')
|
|
:marked
|
|
Our app should be able to make the browser title bar say whatever we want it to say.
|
|
This cookbook explains how to do it.
|
|
:marked
|
|
**See the <live-example name="cb-set-document-title"></live-example>**.
|
|
|
|
table
|
|
tr
|
|
td
|
|
:marked
|
|
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.
|
|
td
|
|
img(src='/resources/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right" )
|
|
br
|
|
img(src='/resources/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right" )
|
|
|
|
|
|
:marked
|
|
## The problem with *<title>*
|
|
|
|
The obvious approach is to bind a property of the component to the HTML `<title>` like this:
|
|
code-example(format='').
|
|
<title>{{This_Does_Not_Work}}</title>
|
|
:marked
|
|
Sorry but that won't work.
|
|
The root component of our 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.
|
|
|
|
We could grab the browser `document` object and set the title manually.
|
|
That's dirty and undermines our chances of running the app outside of a browser someday.
|
|
.l-sub-section
|
|
:marked
|
|
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.
|
|
|
|
:marked
|
|
## 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/index/Title-class.html) service is a simple class that provides an API
|
|
for getting and setting the current HTML document title:
|
|
|
|
* `getTitle() : string` — Gets the title of the current HTML document.
|
|
* `setTitle( newTitle : string )` — Sets the title of the current HTML document.
|
|
|
|
Let's inject the `Title` service into the root `AppComponent` and expose a bindable `setTitle` method that calls it:
|
|
|
|
+makeExample( "cb-set-document-title/ts/src/app/app.component.ts", "class", "src/app/app.component.ts (class)" )(format='.')
|
|
:marked
|
|
We bind that method to three anchor tags and, voilà!
|
|
figure.image-display
|
|
img(src="/resources/images/cookbooks/set-document-title/set-title-anim.gif" alt="Set title")
|
|
|
|
:marked
|
|
Here's the complete solution
|
|
|
|
+makeTabs(
|
|
`cb-set-document-title/ts/src/main.ts,
|
|
cb-set-document-title/ts/src/app/app.module.ts,
|
|
cb-set-document-title/ts/src/app/app.component.ts`,
|
|
'',
|
|
'src/main.ts, src/app/app.module.ts, src/app/app.component.ts' )
|
|
|
|
//
|
|
Todo: tie this back to the router so we can see how to use this Title service to (re)set the title
|
|
that appears in the window navigation history and shows up in the back/forward buttons
|
|
during routing.
|
|
|
|
See https://github.com/angular/angular/issues/7630#issuecomment-198328802
|
|
|
|
.l-main-section
|
|
:marked
|
|
## Why we provide the *Title* service in *bootstrap*
|
|
|
|
We generally recommended providing application-wide services in the root application component, `AppComponent`.
|
|
|
|
Here we recommend registering the title service during bootstrapping,
|
|
a location we reserve for configuring the runtime Angular environment.
|
|
|
|
That's exactly what we're doing.
|
|
The `Title` service is part of the Angular *browser platform*.
|
|
If we bootstrap our application into a different platform,
|
|
we'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.
|
|
:marked
|
|
[Back to top](#top)
|