Setting the Page Title in a Blazor App

This post is gonna be a short one (hence the Tips tag), but it implements something I wish was natively supported in Blazor: setting the page title!

That's right, we're going to see how to take something that used to be a single line of code and make it... *counts on fingers*... 17 lines of code! Progress!

OK, joking aside, I think this is a useful component, and I hope you do too, dear readers.

Note: this sample project was created using Blazor WebAssembly and .NET Core 3.1. I believe it also works in Blazor Server, though if any of my dear readers could prove this I would be eternally grateful.

The Sample Project

Dear Readers, you know me by now, and therefore you know there's a sample project for this post! Check out the BlazorGames project on GitHub:

exceptionnotfound/BlazorGames

Contribute to exceptionnotfound/BlazorGames development by creating an account on GitHub.

GitHubexceptionnotfound

The Script

Before we do anything else, we need a straightforward JavaScript function to set the title:

window.setTitle = (title) => {
    document.title = title;
}

This function now needs to be invoked by our Blazor component.

Creating The Component

Let's add a new Blazor Component to our Shared folder, and name it PageTitle.razor:

This Blazor component has only one property, and two methods:

@inject IJSRuntime _jsRuntime;

@code {
    [Parameter]
    public string Title { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await setTitle();
    }

    private async Task setTitle()
    {
        await _jsRuntime.InvokeVoidAsync("setTitle", Title );
    }
}

Let's discuss the four main things this PageTitle component is doing:

• The component needs the IJSRuntime injected into it. This class allows .NET to call JavaScript methods.
• The component has the property Title set with the [Parameter] attribute, so that it can be set during invocation by other components.
• We are overriding the OnInitializedAsync() method provided by Blazor to call another method, setTitle().
• Finally, the setTitle() method is where we are invoking our JavaScript method to set the page title.

Using the New Component

Using this component is pretty straightforward: on any Blazor component that needs it, we can instantiate our new PageTitle component like this:

<PageTitle Title="What Is Blazor?" />

You can see examples of this in my BlazorGames GitHub project I mentioned earlier, such as on the "What Is Blazor?" page.

Summary

Using a new Blazor Component and some minor JavaScript, we can set the page title very easily in our Blazor projects!

Got any suggestions on how to improve this component? Submit a pull request!

Also, if this post was helpful, would you consider buying me a coffee? Any support you give goes to my projects and helps keep traditional ads off my site. Thanks!

Matthew Jones

I’m a .NET developer, blogger, speaker, husband and father who just really enjoys the teaching/learning cycle.One of the things I try to do differently with Exception...

BuyMeACoffee

Thanks for reading, and Happy Coding!