title: Blazor: Read/observe query parameter from anywhere
body: <p>I have an existing ASP.NET Core + angular application that needs to be converted to a blazor server app due to SEO considerations.</p>
  <p>The existing angular app monitors the <code>lang</code> query parameter and changes the ui-language accordingly. I've made a minimal reproduction <a href="https://github.com/PieterjanDeClippel/AngularI18N" rel="nofollow noreferrer">in the following repository</a>.</p>
  <p>In the AppComponent the query parameter is monitored and changes the language of the entire application:</p>
  <pre><code>constructor(private route: ActivatedRoute, private translateService: TranslateService) {
    const defaultLang = 'en';
    this.route.queryParams.subscribe((params) =&gt; {
      const lang = params['lang'];
      if (!!lang) {
        this.translateService.use(lang);
      } else {
        this.translateService.use(defaultLang);
      }
    });
  }
  </code></pre>
  <p>Now the similar behavior should be applied to the blazor application, but I can't find out how to monitor the query parameters from the <code>AppComponent</code>.</p>
  <p><a href="https://github.com/PieterjanDeClippel/ObserveQueryParametersBlazor" rel="nofollow noreferrer">Here is a repository with the VS solution</a></p>
  <p>This is the code of the AppComponent, where I keep an eye on the <code>lang</code> query parameter.</p>
  <pre><code>@using System.Globalization
  &lt;Router AppAssembly=&quot;@typeof(App).Assembly&quot;&gt;
      &lt;Found Context=&quot;routeData&quot;&gt;
          &lt;RouteView RouteData=&quot;@routeData&quot; DefaultLayout=&quot;@typeof(MainLayout)&quot; /&gt;
          &lt;FocusOnNavigate RouteData=&quot;@routeData&quot; Selector=&quot;h1&quot; /&gt;
      &lt;/Found&gt;
      &lt;NotFound&gt;
          &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
          &lt;LayoutView Layout=&quot;@typeof(MainLayout)&quot;&gt;
              &lt;p role=&quot;alert&quot;&gt;Sorry, there's nothing at this address.&lt;/p&gt;
          &lt;/LayoutView&gt;
      &lt;/NotFound&gt;
  &lt;/Router&gt;
  &lt;p&gt;Current language: @Language, @language&lt;/p&gt;
  
  @code {
  
      private string language;
      [Parameter]
      [SupplyParameterFromQuery(Name = &quot;lang&quot;)]
      public string Language
      {
          get =&gt; language;
          set
          {
              Console.WriteLine(&quot;Culture has been set to &quot; + value);
              language = value;
              CultureInfo.CurrentCulture = CultureInfo.CurrentUICulture = new CultureInfo(value);
          }
      }
  }
  </code></pre>
  <p>On all pages I have somewhat the following code:</p>
  <pre><code>@page &quot;/xxx&quot;
  
  &lt;p&gt;Language: @Language&lt;/p&gt;
  
  @code {
      ...
  
      [Parameter]
      [SupplyParameterFromQuery(Name = &quot;lang&quot;)]
      public string Language { get; set; }
  }
  </code></pre>
  <p>This works fine. However putting the same code on the <code>AppComponent</code> does not work, since <code>SupplyParameterFromQuery</code> works only in a route context.</p>
  <p><a href="https://i.stack.imgur.com/J16cW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J16cW.png" alt="Reading the queryparameter in blazor app component doesn't work" /></a></p>
  <p>How can I read+observe a query parameter anywhere in the Blazor app properly? Thanks in advance</p>