Build World-Class Blazor WebAssembly Apps with Globalization and Localization
Tags: blazor, csharp, dotnet, webdev
Published: 2021-12-01 11:38:55

---
title: Build World-Class Blazor WebAssembly Apps with Globalization and Localization
published: true
date: 2021-12-01 11:00:14 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/build-world-class-blazor-webassembly-apps-with-globalization-and-localization.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08lypykmbhkvdj04wmld.png
---

The world is full of people in different cultures, speaking different languages. For the sake of the global reach of our web applications, we have to provide the web content in users’ native language. In technical terms, we call it [globalization and localization](https://en.wikipedia.org/wiki/Internationalization_and_localization "Wikipedia link to Internationalization and localization").

Syncfusion [Blazor](https://www.syncfusion.com/blazor-components "Link to Syncfusion Blazor UI Controls") platform includes popular [Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Link to Blazor Charts"), [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid"), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Link to Blazor Scheduler"), [Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Link to Blazor Diagram"), [Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Link to Blazor Word Processor"), and [Maps](https://www.syncfusion.com/blazor-components/blazor-map "Link to Blazor Maps") controls, as well as unique [file-format libraries](https://www.syncfusion.com/sales/products/fileformats "Link to Blazor File Formats Controls") for manipulating [Excel](https://en.wikipedia.org/wiki/Microsoft_Excel "Wikipedia link to Microsoft Excel"), [Word](https://en.wikipedia.org/wiki/Microsoft_Word "Wikipedia link to Microsoft Word"), [PDF](https://en.wikipedia.org/wiki/PDF "Wikipedia link to PDF"), and [PowerPoint](https://en.wikipedia.org/wiki/Microsoft_PowerPoint "Wikipedia link to Microsoft PowerPoint") files. These components completely support globalization and localization features.

In this blog, let’s look at how Syncfusion Blazor components adapt well to the browsers’ language settings in WebAssembly apps.

## Browser settings

For this blog, I am going to use the Syncfusion [Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started "Documentation link to Getting started with Blazor DataGrid") component and the [Chrome](https://en.wikipedia.org/wiki/Google_Chrome "Wikipedia link to Google Chrome") web browser. To see the globalization and localization features of the Blazor DataGrid component (in the WebAssembly app) in action, you first need to know how to change your browser language settings.

Refer to the [Setting language preferences in a browser](https://www.w3.org/International/questions/qa-lang-priorities "Documentation link to setting language preferences in a browser") documentation to learn in detail about browser language settings.

In the following GIF image, you’ll see the procedure to change the browser language from the Google home page.

![Setting Languange in Google Homepage](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Setting-Languange-in-Google-Homepage.gif)

## Globalization

Globalization is offering content in different formats and designs for the same language. Let’s take the English language as an example. It is the common language of both the U.S. and the U.K. But the date format in the U.S. is mm/dd/yyyy, and in the U.K. it’s dd/mm/yyyy.

Syncfusion Blazor WebAssembly components react automatically based on the browser’s language settings and no extra work is needed for dates to be correctly formatted.

You can simply render our Syncfusion components by following the documentation and they will adapt automatically to the browser’s language settings:

- [Getting started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio "Documentation link to getting started with Blazor WebAssembly App in Visual Studio")
- [Getting Started with the Blazor DataGrid Component](https://blazor.syncfusion.com/documentation/datagrid/getting-started#add-datagrid-component "Documentation link to getting started with the Blazor DataGrid component")
- [Globalization in the Blazor DataGrid Component](https://blazor.syncfusion.com/documentation/datagrid/global-local "Documentation link to globalization in Blazor DataGrid component")

In the following GIF, I show how the Syncfusion Blazor DataGrid component reacts to changes to the browser language.

![Globalization Support in Syncfusion Blazor WebAssembly DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Globalization-Support-in-Syncfusion-Blazor-WebAssembly-DataGrid.gif)

## Localization

Localization is literally translating the content to a specific language. The procedures to add translation files and enable localization in our Syncfusion Blazor WebAssembly components is:

1. First, provide the language resource files:
  1. Add a **Resource** folder in your WASM application.
  2. Then, add the default and required language files you need in the folder. For the blog, we are going to add the resource file for the language German. The various culture resource files for our Blazor components are in the [blazor-locale](https://github.com/syncfusion/blazor-locale "Link to how to enable Localization in Blazor application GitHub demo") GitHub repository.
2. Now, register the localization service configuration in the **~/Program.cs ** file.
```csharp
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
```
3. Then, create the **~/Shared/SyncfusionLocalizer.cs** file and implement the **ISyncfusionStringLocalizer** interface in the **SyncfusionLocalizer** class.
4. Finally, run the application and set the browser language as German. Then, the Syncfusion Blazor DataGrid content will be translated based on the browser language settings. Refer to the following GIF image.  
 ![Localization Support in Syncfusion Blazor WebAssembly DataGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Localization-Support-in-Syncfusion-Blazor-WebAssembly-DataGrid.gif)

**Note:** For more details, refer to the [Enable Localization in a Blazor WebAssembly application](https://blazor.syncfusion.com/documentation/common/localization#enable-localization-in-blazor-webassembly-application "Documentation link to enable localization in a Blazor WebAssembly application") documentation.

## GitHub reference

Also, you can download the complete demo for [globalization and localization in Blazor WebAssembly](https://github.com/SyncfusionExamples/Globalization-and-Localization-in-wasm "Link to globalization and localization in Blazor WebAssembly GitHub demo").

## Conclusion

Thanks for reading! We saw how to enable globalization and localization support in the Syncfusion [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Link to Blazor DataGrid") in your WebAssembly app. Apply these procedures to other Blazor components, too. You can easily reach a global audience by serving them in their local language and culture. Please leave your feedback in the comments section below!

If you would like to try the Syncfusion components, you can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Link to the free evaluation of the Syncfusion Essential Studio for Blazor"). Also, check out our [Blazor demos](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5 "Link to the Blazor DataGrid Example - Overview")and [documentation](https://blazor.syncfusion.com/documentation/introduction "Documentation link to introduction to Blazor Components") for detailed explanations and the facts you need to proceed further.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/account/login "Link to the Syncfusion support system Direct-Trac"), or [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Simple Steps to Upload Files to Azure Blob Storage in Blazor App](https://www.syncfusion.com/blogs/post/simple-steps-to-upload-files-to-azure-blob-storage-in-blazor-app.aspx "Link to Simple Steps to Upload Files to Azure Blob Storage in Blazor App blog")
- [Easily Synchronize Blazor Resource Scheduler with RESTful Services](https://www.syncfusion.com/blogs/post/easily-synchronize-blazor-resource-scheduler-with-restful-services.aspx "Link to Easily Synchronize Blazor Resource Scheduler with RESTful Services blog")
- [Easily Reach a Global Audience with Localization Support in Your Blazor Apps](https://www.syncfusion.com/blogs/post/easily-reach-a-global-audience-with-localization-support-in-your-blazor-apps.aspx "Link to Easily Reach a Global Audience with Localization Support in Your Blazor Apps blog")
- [Elegantly Visualize Data with the World’s Fastest Blazor Charts](https://www.syncfusion.com/blogs/post/elegantly-visualize-data-with-the-worlds-fastest-blazor-charts.aspx "Link to Elegantly Visualize Data with the World’s Fastest Blazor Charts blog")