So far in this series, we’ve walked through a project intro and also got our feet wet with our first component.
Today, we’re going to take a look at a welcome .NET 5 feature in Blazor: the ability to update your HTML head on the fly without the need for JavaScript interoperability.
When I speak of updating the HTML head, I’m referring to what’s inside the <head> tag in your index.html file. You can now use the following native Blazor components to dynamically update the HTML head:
<Title>- the title of the document. You’d use this if you want to update your user on any updates, especially if they are busy with other tabs. You’ve probably seen this with updates for new email messages or new chat notifications.<Link>- gives you the ability to link to other resources. For example, you might want to dynamically update this to change stylesheets when the user clicks a button to specify light or dark mode.<Meta>- allows you to specify a variety of information for things like SEO, social cards, and RSS information.
Since these are individual components, you can definitely use them together in your code. Following the email example, you could update the title bar with an unread message count and also change the “you have a message” favicon appropriately.
In this post, we’re going to dynamically update the HTML <title> tag from our Blazor component. And since we’re already working with the browser’s title bar, I’ll walk you through adding favicons to our site.
This post contains the following content.
- Dynamically set page title
- Add package reference
- Add script reference
- Reference the project
- Set the page title
- How it all works
- Add favicons to our app
- What about the tests?
- Wrap up
- Resources
#blazor
