` 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 2 bridges the gap by providing a `Title` service as part of the *Browser platform*. The [Title](../api/platform/browser/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. While this class is part of the Browser platform package, it is *not part of the default Browser platform providers* that Angular loads automatically. This means as we bootstrap our application using the Browser platform `boostrap()` function, we'll also have to include `Title` service explicitly as one of the bootstrap providers: +makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.') :marked Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our custom application components and services. 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/app/app.component.ts", "class", "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/app/main.ts, cb-set-document-title/ts/app/app.component.ts`, '', 'app/main.ts, 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 enviroment. 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)

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](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**. .l-sub-section img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") :marked To see the browser Title bar changes, pop out the preview window by clicking the blue 'X' button in the upper right corner. :marked ## The problem with *<title>* The obvious approach is to bind a property of the component to the HTML `` 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 2 bridges the gap by providing a `Title` service as part of the *Browser platform*. The [Title](../api/platform/browser/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. While this class is part of the Browser platform package, it is *not part of the default Browser platform providers* that Angular loads automatically. This means as we bootstrap our application using the Browser platform `boostrap()` function, we'll also have to include `Title` service explicitly as one of the bootstrap providers: +makeExample( "cb-set-document-title/ts/app/main.ts", "bootstrap-title", "app/main.ts (provide Title service)" )(format='.') :marked Once we've explicitly provided the `Title` service we can then inject the `Title` service into any of our custom application components and services. 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/app/app.component.ts", "class", "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/app/main.ts, cb-set-document-title/ts/app/app.component.ts`, '', 'app/main.ts, 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 enviroment. 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)