Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug(transloco): Multiple languages on the application simultaneously with pipe #736

Open
1 task done
GitHubish opened this issue Dec 15, 2023 · 4 comments
Open
1 task done

Comments

@GitHubish
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

No

Current behavior

In my application, I want to display one or more components in a language other than the active language throughout the rest of the application (this is a preview of a printable report). I've tried passing the language as a pipe parameter, using the directive, but it doesn't work dynamically. Changing the language of this preview is done through a drop-down list. And when I change the language, the content translated by the pipe or the directive doesn't change. What's wrong?

CleanShot 2023-12-15 at 09 51 16@2x

Expected behavior

When I change the language in a drop-down list, I want to be able to display only that component in the desired language without changing the active language of the rest of the application.

Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.

https://codesandbox.io/p/sandbox/ngneat-transloco-forked-564v38?file=%2Fsrc%2Fapp%2Fmulti-langs%2Fmulti-langs.component.html%3A9%2C14

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 
Angular: 
Node: 
Package Manager: 
OS:

Browser

No response

Additional context

No response

I would like to make a pull request for this bug

No

@shaharkazaz
Copy link
Collaborator

@GitHubish I can't fully understand your scenario and there are no instructions for your reproduction (seems like it's just the playground app).
Please provide a reproduction for your case. generally speaking, if you want to control the language of a specific component you can do that by using the static flag, e.g. lang: '{previewLang}|static'.

@GitHubish
Copy link
Author

Sorry @shaharkazaz for not providing enough in my explanation. What I'm trying to do is display a component in a selected language (so the change is dynamic) and this language may therefore be different from the "global" language of my application. The use case is that of a preview of a page that will be printable, this page is made up of a set of components (graphics) and must therefore be displayed in the language selected in a drop-down list without changing the language of the rest of the application. I use an @input to pass them the selected language and I wanted the translations to change using one of the methods on the "Multiple Languages Simultaneously" page, but this doesn't work. I can't use the static argument as it's dynamic.

I hope this has made things clearer?

new example : https://codesandbox.io/p/sandbox/ngneat-transloco-forked-564v38?file=%2Fsrc%2Fapp%2Fmulti-langs%2Fmulti-langs.component.html%3A1%2C1

Thank you

@shaharkazaz
Copy link
Collaborator

@GitHubish Thanks, it's clear.
I'll think about how I want to approach this, but generally speaking, the directive isn't listening to input changes and that's the issue here

@GitHubish
Copy link
Author

@shaharkazaz Thank you very much! Also with the pipe, I guess it's the same thing, it doesn't listen to the change and therefore doesn't update the key translation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants