Is it possible to change the language (strings) of a SPFx webpart inside the webpart?

Question

I have a SPFx webpart with "de" and "en" locales and want to change the language with a button in the webpart. How can i change the locales?

SPFx webpart on a modern page.

Answer 1

The language information are provided under the object this.context.pageContext.cultureInfo in the webpart context. This is the same object the module loader is leveraging at runtime to dynamically load this or that language, all of that is read only which means you can't override it as runtime.
This object is hydrated by the SharePoint Hosting context (in charge of bootstrapping your webpart), which in it's turn gets the information from the SharePoint user profile as well as the browser configuration (if no profile information is available).
However if you want to change the user's language, you can change the property in the user profile, keep in mind this will take time to propagate on all the sites. Also the site needs to have the language enabled to be able to offer it.

Answer 2

Try below in your WebPart.ts file inside the section React.ReactElement

currentLanguage: this.context.pageContext.cultureInfo.currentUICultureName,
isArabic: this.context.pageContext.cultureInfo.isRightToLeft

It should look like this.

Hope that will help someone.