Blazor WebAssembly Update Page Title

Question

Framework: .NET Core 3.1 (Blazor WebAssembly)

I have just scaffolded a simple Blazor WebAssembly app, and added multiple pages. On redirection to the specific page, I want to update the window/tab title to [Page Name] | My App.

In ASP.NET MVC or Core, we could use the ViewBag to update the <title> element in Layout.cshtml.

What would be the equivalent approach in Blazor WebAssembly app?

Thanks.

Answer 1

You should be using the Microsoft.AspNetCore.Components.Web.Extensions nuget package: https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web.Extensions. It is currently still in prerelease but stable.

It does exactly what you are looking for, you get components for <Title>, <Link>, and <Meta> tags. It still uses JavaScript to perform the update, but it is much cleaner than the other solutions out there. I personally use this package successfully in a production app. Here's how to get it setup:

1. Install the nuget package Install-Package Microsoft.AspNetCore.Components.Web.Extensions -Prerelease
2. In your index.html file under wwww root folder, add a reference to the JS file: <script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js" type="module"></script>
3. On any *.razor page you want to set the title on, or in the _Imports.razor file for a folder, add the using directive: @using Microsoft.AspNetCore.Components.Web.Extensions.Head
4. Use the various tags as needed:

<Title value="My Page Title" />
<Meta name="description" content="My Blazor Component" />
<Link rel="icon" type="image/x-icon" href="/favicon.ico" />
<Link rel="alternate" href="/feed.rss" type="application/rss+xml" />