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.

Website design books
Honestly, I think we're just a little beyond this by now. Photo by Greg Rakozy / Unsplash

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.

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...

Thanks for reading, and Happy Coding!


Did you enjoy this post? Then you'll love my premium newsletter The Catch Block! Issues come out every Wednesday, and they have the best links to quality stories from all around the ASP.NET and web programming worlds. Plus, original stories, tips, tutorials and sample code you won't find anywhere else. Even better, it's only $5/month, or $55/year! Check out the previous issues, and then sign up to get The Catch Block today!