<ul class="contains-task-list">
<li><strong>I'm submitting a ...</strong></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> bug report</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> feature request</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> support request =&gt; Please do not submit support request here, see note at the top of this template.</li>
</ul>
<p dir="auto">I'm using the following to update the document title when views change:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;nav&gt;
    &lt;h1&gt;Preamble BDD&lt;/h1&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a (click)=&quot;setTitle('Preamble BDD')&quot; [routerLink]=&quot;['/']&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a (click)=&quot;setTitle('Preamble BDD Changelog')&quot; [routerLink]=&quot;['/changelog']&quot;&gt;Changelog&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a (click)=&quot;setTitle('Preamble BDD API')&quot; [routerLink]= &quot;['/api']&quot;&gt;API&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
&lt;router-outlet&gt;&lt;/router-outlet&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">nav</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Preamble BDD<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">(click)</span>="<span class="pl-s">setTitle('Preamble BDD')</span>" <span class="pl-c1">[routerLink]</span>="<span class="pl-s">['/']</span>"<span class="pl-kos">&gt;</span>Home<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">(click)</span>="<span class="pl-s">setTitle('Preamble BDD Changelog')</span>" <span class="pl-c1">[routerLink]</span>="<span class="pl-s">['/changelog']</span>"<span class="pl-kos">&gt;</span>Changelog<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
        <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">(click)</span>="<span class="pl-s">setTitle('Preamble BDD API')</span>" <span class="pl-c1">[routerLink]</span>= "<span class="pl-s">['/api']</span>"<span class="pl-kos">&gt;</span>API<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">nav</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">router-outlet</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">router-outlet</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">It works but only when the user actually clicks on one of the links. However, when navigating via history (i.e. the browser's nav buttons) the document title remains unchanged and doesn't accurately reflect the current view. I am currently using the following in my views to get around this issue but it feels like something the Title service should be able to do if it was watching push and pop state events:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from &quot;@angular/core&quot;;
import {Title} from &quot;@angular/platform-browser&quot;;

@Component({
    templateUrl: &quot;app/home.component.html&quot;
})

export class HomeComponent {
    constructor(private titleService: Title) { }
    ngOnInit() {
        this.titleService.setTitle(&quot;Preamble BDD&quot;);
        console.log(&quot;ngOnInit called&quot;);
    }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@angular/core"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Title</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@angular/platform-browser"</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">templateUrl</span>: <span class="pl-s">"app/home.component.html"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">HomeComponent</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-k">private</span> <span class="pl-s1">titleService</span>: <span class="pl-smi">Title</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span>
    <span class="pl-en">ngOnInit</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">titleService</span><span class="pl-kos">.</span><span class="pl-en">setTitle</span><span class="pl-kos">(</span><span class="pl-s">"Preamble BDD"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"ngOnInit called"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Notice the implementation for ngOnInit in the component class. As I stated above, I think the Title service should be able to do this by listening to push and popstaate events.</p>
<p dir="auto">Please consider adding this feature to the Title service.</p>
<p dir="auto"><strong>I'm submitting a ...</strong><br>
[ ] bug report<br>
[x] feature request<br>
[ ] support request.</p>
<p dir="auto">No obvious way to influence the history title (see <a href="https://css-tricks.com/using-the-html5-history-api/" rel="nofollow">this background</a>) that appears when you press-and-hold a browser's back/forward buttons.</p>
<p dir="auto">We either need this as a router feature or have some reasonable technique available for devs to implement themselves.</p>
<p dir="auto">This title should be dynamic as the displayed value is often constructed on the fly by the component (e.g, "Hero Detail: Magneta"). I'd like to see this option be part of the link parameters array and somehow involved in the <code class="notranslate">navigateTo</code> methods.</p>
<p dir="auto">The A1 routers could do it. So can routers for other frameworks. We need it.</p>