Dynamically setting the page title in a Blazor application

Setting the page title is important to allow the user to organize their tabs in the web browser. The title can also give useful information. For instance, Outlook indicates when you have an unread message by adding an indicator in the title. Microsoft Teams indicates the number of unread messages in the title.

A Blazor application is a single page application. This means you may need to update dynamically the page title when the user navigates to another page or when the state of the application changed. Blazor doesn't provide any built-in method to change the page title. This means you need to call a JS function to update the document title.

1. Add this script in the page

   HTMLcopy

   <script>
       function BlazorSetTitle(title) {
           document.title = title;
       }
   </script>

2. Create a new Blazor component named Shared/PageTitle.razor with the following content

   Razorcopy

   @inject IJSRuntime JSRuntime
   @code{
       [Parameter]
       public string Value { get; set; }
   
       protected override async Task OnAfterRenderAsync(bool firstRender)
       {
           await JSRuntime.InvokeVoidAsync("BlazorSetTitle", Value);
       }
   }

3. Use the PageTitle component in the pages

   Razorcopy

   @page "/counter"
   
   <PageTitle Value="@GetPageTitle()" />
   
   <h1>Counter</h1>
   <p>Current count: @currentCount</p>
   <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
   
   @code {
       private int currentCount = 0;
   
       private void IncrementCount() => currentCount++;
   
       private string GetPageTitle() => $"Counter ({currentCount}) - Meziantou";
   }

The page title is updated when you set the Title parameter.

#ASP.NET Core Blazor 5.0

The next release of Blazor will come with a bunch of new features. One of them is about influencing HTML head from a Blazor component. This feature allows to set the <title>, <meta> and <link> tags. The way it works is very similar to what we build in the previously except you don't need to manually write JS code and it should support pre-rendering 😃

To use these feature you need to:

• Add a package reference to the Microsoft.AspNetCore.Components.Web.Extensions package
• Include the following script tag <script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js"></script>
• Add a @using directive for Microsoft.AspNetCore.Components.Web.Extensions.Head

Then, you can use the Title component to set the document title:

<Title Value="@title" />

For completeness, here's how to set the description, the favicon, and a custom link element:

@using Microsoft.AspNetCore.Components.Web.Extensions.Head
@page "/counter"

<Title value="My title" />
<Meta name="description" content="Modifying the head from a Blazor component." />
<Link rel="icon" type="image/x-icon" href="/favicon.ico" />
<Link rel="alternate" href="/feed.rss" type="application/rss+xml" />

#Additional resources

• Influencing HTML Head from a Blazor component - Issue
• Influencing HTML Head from a Blazor component - Pull Request
• Document.title - MDN

Do you have a question or a suggestion about this post? Contact me!