How to set page title in blazor?

Question

As Blazor being a SPA framework, I would like to know is it possible to set a page title for each individual page in Blazor?

I am currently working on Blazor webassembly project and cannot figure out a way how to add a page title since there is only one index.html as it should be in SPA, but would be really useful if it can be achieved to set title for each "page".

Answer 1

Note: starting with .Net 6.0 there is official support for changing the title, so the solution below is no longer needed.

1. Provide following script in your index.html (or in an included .js file):

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

2. In each page inject the jsinterop:

   @inject IJSRuntime JSRuntime;
   

3. After each render, set the document title to the value of your choice:

   @code
   {
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
         await JSRuntime.InvokeVoidAsync("setTitle", "this is the new title"); ;        
      }    
   }
   

Answer 2

In ASP.NET CORE 5.0, a new component for Title is added

 <Title value="Page title" /> 

Msdn Reference: https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/additional-scenarios?view=aspnetcore-5.0#influence-html-head-tag-elements

First add the using statement in the component

@using Microsoft.AspNetCore.Components.Web.Extensions.Head

You can install (if not installed) using the command.

dotnet add package Microsoft.AspNetCore.Components.Web.Extensions --version 5.0.0-preview9.20467.1

5.0.0-preview9.20467.1 is the version when I am writing this. Please check the nuget url for the latest version

Nuget url: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions/

Then add the Title tag.

<Title Value="My page title" />

See the sample output image below