feat: add angular tutorial article #437

Gunkev · 2023-07-12T17:47:22Z

Tolgee angular tutorial article

netlify · 2023-07-12T17:47:25Z

👷 Deploy request for tolgee-web pending review.

Name	Link
🔨 Latest commit	`beb54a0`

JanCizmar · 2023-07-13T07:39:13Z

blog/2023-07-12-angular-tutorial.md

+
+Once you hit the save button, it will generate an API key under the Integrate section. Make sure to save the key somewhere. You will be using it later.
+
+## Step 3: Install Tolgee


Creation of angular project should be separate step

JanCizmar · 2023-07-13T07:48:26Z

blog/2023-07-12-angular-tutorial.md

+
+Add the `NgxTolgeeModule` in the import section and provide a Tolgee instance in the providers. Our default application language is en you can change it to fr or es depending on your preferences. Lastly, we import the environment variable we added earlier which will help us to communicate with the server.
+
+## Step 6: Translate Your Texts and Export the files:


From now on, it feels like you still need to get what's the most important benefit of Tolgee. With the toggle-SDK installed, you can add the keys by alt + clicking them. So you can add the key to the code and then translate it directly in the running app. You don't have to go to the platform and add it manualy. https://tolgee.io/js-sdk/in-context

I actually don't blame you for not getting it correctly. It's more that our documentation could be structured better so the reader who directly goes to the angular section finds out about this. Sorry! 😢

JanCizmar · 2023-07-13T08:10:42Z

Hey! Sorry, for that I wasn't reviewing the Vue.js article, but can you fix the same issues there?

…ation

JanCizmar

Much better. Please fix accordingly and sync the Angular and Vue! Your work is much appreciated! Thanks a lot! 🚀 🐁

JanCizmar · 2023-07-19T15:25:11Z

blog/2023-06-28-vue-tutorial.md

+
+![Translation dialog](/img/blog/vue-tutorial/translation_dialog.png)
+
+Once you have added your translations, click on the save button to store your translations in the Tolgee Platform.


You can also mention, that you can add screenshots in the same time and Tolgee automatically collects context of the translations for usage with the Tolgee translator. https://tolgee.io/blog/tolgee-ai-translator

New user's might be confused, why we use this approach, so it would be great if you supported it with few arguments.

It's faster then edit the localization .json or add it to the platform manually

To fix such key, you have just to click the string. Any team member can do that with Tolgee chrome plugin. Not only developers.

You can generate screenshots by clicking the camera. This way future translators will know the context and will translate the string correctly

JanCizmar · 2023-07-19T15:29:46Z

blog/2023-06-28-vue-tutorial.md

+
+Once you have added your translations, click on the save button to store your translations in the Tolgee Platform.
+
+Equally, you can follow the same process to update your translations.


Also, for importing lot of translations from large codebase, there is the CLI extract command. (It works only for React now, but we are working on Vue and Angular implementations) https://tolgee.io/tolgee-cli/extraction/syncing-strings

JanCizmar · 2023-07-19T15:31:14Z

blog/2023-06-28-vue-tutorial.md

+
+![List of translations](/img/blog/vue-tutorial/translation_list.png)
+
+Tolgee also allows you to export your translations in `json` files. In your Tolgee dashboard, click on export in the left menu, then select the languages you want then click on export


You should mention here, that this can be done automatically in CI/CD tool via REST API or Tolgee CLI. So user's wont think that they have to manually export it all the time.

JanCizmar

It's almost fine. Thanks a lot! 🚀

Please sync the changes with both the articles.

Thanks! 🤘

JanCizmar · 2023-07-26T10:33:41Z

blog/2023-07-12-angular-tutorial.md

+
+### Automated Translation
+
+Tolgee can help you automate your translation process. It has a platform that integrates with machine translation services, such as Google Translate and AWS, to automatically translate your content. This ensures that your translations are accurate and consistent.


It would be great to mention Tolgee translator here. With it, the translation can be almost autonomous!!! https://tolgee.io/blog/tolgee-ai-translator

JanCizmar · 2023-07-26T10:37:16Z

blog/2023-07-12-angular-tutorial.md

+
+- The DevTools() is used for in-context translating in dev mode
+- The FormatSimple() enables you to pass variables into translations
+- The BackendFetch() fetches data from the custom backend


You actually don't use the BackendFetch plugin and you don't need it in most cases. Only thing the plugin does is that if you published your i18n data for example on https://example.com/i18/en.json, etc., it can fetch the data from there. But it's not something you should cover in this article.

JanCizmar · 2023-07-26T10:41:36Z

blog/2023-07-12-angular-tutorial.md

+
+In case you have a lot of translations from large codebase, you can use the [CLI extract command](https://tolgee.io/tolgee-cli/extraction/syncing-strings). (It works only for React now, but we are working on Vue and Angular implementations)
+
+To export your translations, click on the Export menu in your left menu


Sorry, I didn't mention this before. This part should be called "Preparing for production". And it also should cover, how you provide the data if you don't specify your API key. You should also mention that the API should never be leaked.

When you build the app for production, you export the data (prefarably using the CLI) and then you provide it as a staticData configuration property. (or you can use BackendFetch), but that's not the optimal way we recommend. You can read more about that here: https://tolgee.io/js-sdk/integrations/angular/installation#preparing-for-production

and here:

https://tolgee.io/js-sdk/providing-static-data

JanCizmar · 2023-07-26T10:42:19Z

blog/2023-07-12-angular-tutorial.md

+
+Now, navigate to `src` folder in your angular project and create `i18n` folder. Add the content of the extracted file to this folder.
+
+![Create I18n folder](/img/blog/angular-tutorial/angular_i18n.png)


You don't have to show the full contents of the files here. It's very long for the article.

Tolgee angular tutorial article

feat: add angular tutorial article

7cd4769

marketachalupnikova assigned JanCizmar Jul 13, 2023

JanCizmar requested changes Jul 13, 2023

View reviewed changes

Gunkev added 5 commits July 17, 2023 19:07

Merge https://github.com/tolgee/documentation into angular-tutorial

957815d

chores: fix angular article translation

3f4d369

chores: fix vue article translation

674c36d

Merge branch 'main' of https://github.com/tolgee/documentation

4efceff

Merge branch 'angular-tutorial' of https://github.com/Gunkev/document…

560b9cf

…ation

Gunkev requested a review from JanCizmar July 17, 2023 19:52

JanCizmar requested changes Jul 19, 2023

View reviewed changes

Gunkev added 4 commits July 19, 2023 18:13

Merge https://github.com/tolgee/documentation

16799d9

chore: update vue integration article

faa489c

chore: update angular integration tutorial

5c1b34d

chore: fix typo

5f6890a

Gunkev requested a review from JanCizmar July 19, 2023 18:39

JanCizmar requested changes Jul 26, 2023

View reviewed changes

Gunkev added 3 commits July 26, 2023 20:34

chore: updated vue example article

12490a5

chore: updated angular example article

3d4206a

Merge https://github.com/tolgee/documentation into angular-tutorial

4ac8b78

Gunkev requested a review from JanCizmar July 26, 2023 19:47

Gunkev and others added 7 commits August 9, 2023 14:03

Merge https://github.com/tolgee/documentation into angular-tutorial

9b4f5ed

Merge branch 'tolgee:main' into main

4198c6d

changed img externsion to lowercase

0362afb

changed img externsion to lowercase

a21db3b

changed img externsion to lowercase

551c647

changed img externsion to lowercase

0c09e3e

Merge https://github.com/Gunkev/documentation into angular-tutorial

beb54a0

JanCizmar approved these changes Aug 10, 2023

View reviewed changes

JanCizmar merged commit b7309a0 into tolgee:main Aug 10, 2023
1 of 2 checks passed

stepan662 pushed a commit that referenced this pull request Aug 11, 2023

feat: add angular tutorial article (#437)

c692673

Tolgee angular tutorial article

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add angular tutorial article #437

feat: add angular tutorial article #437

Gunkev commented Jul 12, 2023

netlify bot commented Jul 12, 2023 •

edited

Loading

JanCizmar Jul 13, 2023

JanCizmar Jul 13, 2023

JanCizmar commented Jul 13, 2023

JanCizmar left a comment

JanCizmar Jul 19, 2023

JanCizmar Jul 19, 2023

JanCizmar Jul 19, 2023

JanCizmar Jul 19, 2023

JanCizmar left a comment

JanCizmar Jul 26, 2023

JanCizmar Jul 26, 2023

JanCizmar Jul 26, 2023

JanCizmar Jul 26, 2023


		Once you hit the save button, it will generate an API key under the Integrate section. Make sure to save the key somewhere. You will be using it later.

		## Step 3: Install Tolgee


		Add the `NgxTolgeeModule` in the import section and provide a Tolgee instance in the providers. Our default application language is en you can change it to fr or es depending on your preferences. Lastly, we import the environment variable we added earlier which will help us to communicate with the server.

		## Step 6: Translate Your Texts and Export the files:


		![Translation dialog](/img/blog/vue-tutorial/translation_dialog.png)

		Once you have added your translations, click on the save button to store your translations in the Tolgee Platform.


		Once you have added your translations, click on the save button to store your translations in the Tolgee Platform.

		Equally, you can follow the same process to update your translations.


		![List of translations](/img/blog/vue-tutorial/translation_list.png)

		Tolgee also allows you to export your translations in `json` files. In your Tolgee dashboard, click on export in the left menu, then select the languages you want then click on export


		### Automated Translation

		Tolgee can help you automate your translation process. It has a platform that integrates with machine translation services, such as Google Translate and AWS, to automatically translate your content. This ensures that your translations are accurate and consistent.


		In case you have a lot of translations from large codebase, you can use the [CLI extract command](https://tolgee.io/tolgee-cli/extraction/syncing-strings). (It works only for React now, but we are working on Vue and Angular implementations)

		To export your translations, click on the Export menu in your left menu


		Now, navigate to `src` folder in your angular project and create `i18n` folder. Add the content of the extracted file to this folder.

		![Create I18n folder](/img/blog/angular-tutorial/angular_i18n.png)

feat: add angular tutorial article #437

feat: add angular tutorial article #437

Conversation

Gunkev commented Jul 12, 2023

netlify bot commented Jul 12, 2023 • edited Loading

👷 Deploy request for tolgee-web pending review.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JanCizmar commented Jul 13, 2023

JanCizmar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JanCizmar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Jul 12, 2023 •

edited

Loading