Dynamic language selection in a single component?

[ndwa-joshua]

Hi team. Apologies if I've missed something but I have what I thought was a pretty straightforward use case that doesn't seem to be supported.

I'd like to be able to dynamically select a language and have transloco use that language for a particular component (not globally). For a practical use case, consider a component that lets a user preview some content in multiple languages (but doesn't change that user's interface language).

Given that it's possible to specify the language within the scope of a component via the structural directive and a component property, that seemed pretty straightforward, but once the template renders the first time, modifying that property doesn't do anything, even if I use the pipe instead of the structural directive.

Am I missing something?
Here's a fork of the project's demo stackblitz modified to show the problem and one potential (not great) solution:

https://stackblitz.com/edit/ngneat-transloco-gmhrwd?file=src/app/home/home.component.ts

Note that the buttons in the component (which modify the variable) don't do anything. To make it dynamic I had to pop up all the way to the router (and even that had to override router.routeReuseStrategy.shouldReuseRoute) to get the template to re-render. But cluttering parent components (or the router) doesn't seem ideal for purely internal view logic.

If there's no way to do this without a parent component injecting the language and triggering re-rendering, my minimum suggestion would be to update the documentation in https://ngneat.github.io/transloco/docs/multi-lang . Some of the language like:

Note that it will be used as the initial language. If you need it to be static, you can use the static pipe:

and

// Define the lang dynamically in the component
<ng-container *transloco="let t; lang: someVariable">

strongly imply (or at least it did to me) that you can dynamically change the language in the way I'm attempting