### HTML Input Example Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/config-options/multi-input/src/folder-1/1.html An example of an HTML file used as an input source for Transloco Keys Manager. ```html Test

{{ t('d' + 4)}}

{{ t('1') }} {{t('2')}} {{t('3', {id: 1} )}} {{t('4')}} {{t("5", {name: "avo"})}} {{t("6")}} {{t("7", {id: 3, name: 'cc', 'dd': 'ddsds'})}} {{t('8')}} **{{ t('9')}}** {{ t('10') }} {{ t('11')}} [{{ t('12')}}](javascript:void(0); **{{ t('14')}}** {{ t("15")}} {{ t('17', {id: 'ds'}) }} {{ t('18')}} {{ t('20', {id: "ds"}) }} ``` -------------------------------- ### V5 Configuration Migration Example Source: https://github.com/jsverse/transloco-keys-manager/blob/master/BREAKING_CHANGES.md Example showing the migration of configuration paths from previous versions to v5, requiring prefixing with the source root. ```typescript import {TranslocoGlobalConfig} from "@jsverse/transloco-utils"; const config: TranslocoGlobalConfig = { rootTranslationsPath: 'assets/i18n/', langs: ['it', 'en'], keysManager: { input: ['app'], output: 'assets/i18n/' }, } export default config; ``` ```typescript import {TranslocoGlobalConfig} from "@jsverse/transloco-utils"; const config: TranslocoGlobalConfig = { // 👇 rootTranslationsPath: 'src/assets/i18n/', langs: ['it', 'en'], keysManager: { input: [ // 👇 'src/app', // 🥳 Scanning non buildable libs is now supported 'projects/ui-lib/src/lib' ], // 👇 output: 'src/assets/i18n/' }, } export default config; ``` -------------------------------- ### V2 Dynamic Template Keys Example Source: https://github.com/jsverse/transloco-keys-manager/blob/master/BREAKING_CHANGES.md Example demonstrating how comments in templates inherit the 'read' input value and are prefixed with it. ```html ... ... ``` -------------------------------- ### Template Examples Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/ng-template/src/1.html Demonstrates various ways to use the t function within an Angular template for translation. ```html {{ title }} {{ t('1') }} {{t('2')}} {{t('3', {id: 1} )}} {{t('4')}} {{t("5", {name: "avo"})}} {{t("6")}} {{t("7", {id: 3, name: 'cc', 'dd': 'ddsds'})}} {{t('8')}} **{{ t('9')}}** {{ t('10') }} {{ t('11')}} **{{ t('14')}}** {{ t("15")}} {{ t('17', {id: 'ds'}) }} {{ t('18')}} {{ t('20', {id: "ds"}) }} ``` -------------------------------- ### HTML with Transloco Directives Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/config-options/multi-input/src/folder-2/3.html An example of an HTML file using Transloco's translation directives. ```html {{ t('32') }} dskdsds {{ '37' | transloco}} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam consequatur facilis ipsa maxime non optio qui reiciendis velit voluptate. Atque deserunt dignissimos explicabo natus placeat sunt veniam voluptates? Itaque. {{ b('33') }} dskdsds {{ '38' | transloco}} {{ t('36') }} dskdsds ``` -------------------------------- ### Basic Transloco Pipe Usage Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/5.html Shows simple translation using the transloco pipe with a key. ```html {{"28" | transloco}} {{"29" | transloco: {id: 1}} {{"30" | transloco: { name: 'Avi' } }} {{"31" | transloco}} {{ "32" | transloco }} {{ "33" | transloco }} {{"34" | transloco}} {{ (condition ? '35' : '36') | transloco: { name: 'ccc'} }} {{saveButtonKey | transloco}} {{'37' | transloco}} {{ (condition ? "38" : '39') | transloco: { name: "ccc"} }} {{ (condition ? '40' : '41') | transloco: { name: "ccc"} }} {{ (condition ? '42' : '43') | transloco: { name: "ccc"} }} {{ '48' | transloco }} {{ '49.50.51.52' | transloco }} {{ 'not' + 4 | transloco }} {{ 'numer' ++ 4 | transloco }} ``` -------------------------------- ### HTML with Transloco Pipes Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/3.html An example of HTML content using the transloco pipe for dynamic translations. ```html {{"20" | transloco}} {{ "" | transloco}} {{dims[0].insightDimensionName}} "{{dims[0].insightDimensionValue}}" {{"21" | transloco}} {{dim.insightDimensionName}}: {{"22" | transloco}} {{dim.insightDimensionName}} : {{"23" | transloco}} : {{ '' | transloco}} ``` -------------------------------- ### Pipe with Interpolation and Context Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/6.html Example of using the Transloco pipe with interpolation and a context object. ```html {{ '{{count}} items' | transloco:{ count: item.usageCount } }} ``` -------------------------------- ### HTML Template with Transloco Directives Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/ng-container/src/1.html An example HTML template showcasing various Transloco translation directives and interpolation. ```html {{title}} {{ t('d' + 4)}} {{ t('1') }} {{t('2')}} {{t('3', {id: 1} )}} {{t('4')}} {{t("5", {name: "avo"})}} {{t("6")}} {{t("7", {id: 3, name: 'cc', 'dd': 'ddsds'})}} {{t('8')}} **{{ t('9')}}** {{ t('10') }} {{ t('11')}} [{{ t('12')}}](javascript:void(0); **{{ t('14')}}** {{ t("15")}} {{ t('17', {id: 'ds'}) }} {{ t('18')}} {{ t('20', {id: "ds"}) }} {{t('Bob\'s Burgers')}} {{t('another(test)') | json}} {{t('last "one"') | json | lowercase}} ``` -------------------------------- ### Template Extraction Example Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/ng-container/with-params/1.html This snippet shows how Transloco's template extraction handles translations with parameters within an HTML template. ```html {{ t('1', {'1': 'asd'}) }} {{ b('2', {'2': 'asd'}) }} {{ t('5', {'5': 'asd'}) }} {{ b('nested', {a: '', b: {c: {d: ''} } }) }} {{ t('skip.params', someVariable) }} ``` -------------------------------- ### HTML Template with Pipe Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/1.html An example of an HTML template using the transloco pipe for translation and dynamic pluralization. ```html {{"1" | transloco}} {{errorCounter}} {{"2" | transloco}}{{errorCounter > 1 ? 's' : ''}} {{"3" | transloco}} {{"4" | transloco}} {{"5" | transloco}} ``` -------------------------------- ### Template Key Extraction Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/ng-container/src/3.html Examples of how translation keys are embedded and extracted within an HTML template using Transloco directives and pipes. ```html {{ t('32') }} ``` ```html {{ '37' | transloco}} ``` ```html {{ b('33') }} ``` ```html {{ '38' | transloco}} ``` ```html {{ t('36') }} ``` ```html {{ variable | another : t('40') }} ``` ```html {{ variable | another : t('41') | lowercase }} ``` ```html {{ variable | another : {a: t('42')} | lowercase }} ``` ```html {{ t('43') | another: t('44') }} ``` ```html {{ t('45') | another: ('46' | transloco) }} ``` -------------------------------- ### V2 Dynamic Template Keys Extracted Keys Source: https://github.com/jsverse/transloco-keys-manager/blob/master/BREAKING_CHANGES.md The resulting JSON object of extracted keys from the V2 dynamic template keys example. ```json { "this.is.cool": "", "messages.success": "", "messages.error": "", "general.ok": "", "general.cancel": "" } ``` -------------------------------- ### Template Extraction with Prefix Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/prefix/src/1.html This snippet demonstrates template extraction from an HTML file with a prefix. ```html {{ t( '1' ) }} {{t(condition ? '2' : '3')}} {{t(condition ? '4' : "5")}} {{t(condition ? "6" : '7')}} {{t(condition ? "8" : "9")}} {{t(condition ? condition2 ? "10" : "11" : "12")}} {{ should ? not : extract }} {{ also ? 'th' : 'is' }} {{title}} {{ t('d' + 4)}} {{ t(condition ? "22" : "23" )}} {{ t('1') }} {{t('2')}} {{t('3', {id: 1} )}} {{t('4')}} {{t("5", {name: "avo"})}} {{ p(condition ? '1' : "2") }} {{ k(condition ? '1' : "2") }} {{t("6")}} {{t("7", {id: 3, name: 'cc', 'dd': 'ddsds'})}} {{t('8')}} **{{ t('9')}}** {{ t('10') }} {{ t('11')}} [{{ t('12')}}](javascript:void(0); **{{ t('14')}}** {{ t("15")}} {{ t('17', {id: 'ds'}) }} {{ t('18')}} {{ t('20', {id: "ds"}) }} ``` -------------------------------- ### Basic Pipe Usage Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/2.html Demonstrates how to use the transloco pipe to translate a key. ```html {{"6" | transloco}} {{"7" | transloco}} {{"8" | transloco}} {{"9" | transloco}} {{"10" | transloco}} {{"11" | transloco}} {{"12" | transloco}} ``` -------------------------------- ### Pipe with Parameters Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/2.html Shows how to pass parameters to the transloco pipe for dynamic translations. ```html {{\_dateRangeLabelText}} {{"13" | transloco}} {{"14" | transloco}} {{"15" | transloco}} {{"16" | transloco}} {{"17" | transloco}} {{"18" | transloco}} {{"19" | transloco}} ``` -------------------------------- ### Pipe with Object and String Interpolation Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/6.html Demonstrates complex pipe usage involving objects, string interpolation, and multiple pipes. ```html {{ var | another : {foo: '68' | transloco} | other : ('69' | transloco) }} {{ var | another : ('70' | transloco) | lowercase }} ``` -------------------------------- ### Basic Pipe Usage Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/6.html Shows basic usage of the Transloco pipe with static strings and variables. ```html {{ '59' | transloco | another }} {{ '60' | another | transloco | other }} {{ '61' | another | other | transloco }} {{ var + 'not' | transloco }} {{ '63.64.65' | another | other | transloco }} {{ '66' | transloco }} ``` -------------------------------- ### Template with Control Flow Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/control-flow/src/1.html This snippet shows various control flow structures within an HTML template, demonstrating how Transloco's translation pipe and function can be used in conjunction with directives like @if, @for, @switch, @defer, @error, and @placeholder. ```html @let myVar = '27' | transloco; {{ '1' | transloco }} {{ t('3') }} {{ t('4') }} @if (a > b) { {{ '5' | transloco }} {{ t('7') }} {{ t('8') }} } @else if (b > a) { {{ '9' | transloco }} } @else { } @for (item of items; track item.id) { {{ '11' | transloco }} } @empty { {{ '12' | transloco }} } @switch (condition) { @case (caseA) { {{ '13' | transloco }} } @default { {{ '14' | transloco }} } } @defer { {{ '15' | transloco }} } @error { {{ '16' | transloco }} } @placeholder { {{ '17' | transloco }} } @loading { {{ '18' | transloco }} } @if (a > b) { {{ t('19') }} } @else if (b > a) { } @else { @for (item of items; track item.id) { {{ t('21') }} } @empty { @switch (condition) { @case (caseA) { {{ t('22') }} } @default { @defer { {{ '23' | transloco }} } @error { } @placeholder { {{ t('25') }} } @loading { {{ t('26') }} } } } } } @switch (condition) { @case (caseA) @case (caseB) { {{ '27' | transloco }} } @default { {{ '28' | transloco }} } } @switch (condition) { @case (caseA) @case (caseB) { {{ t('29') }} } @default { {{ t('30') }} } } ``` -------------------------------- ### Pipe with Array Manipulation Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/6.html Shows pipe usage with array splitting and conditional logic. ```html {{ (('77' | transloco) + 'a').split(('78' | transloco) || ',') }} ``` -------------------------------- ### Conditional Pipe Usage Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/buildTranslationFiles/template-extraction/pipe/src/6.html Illustrates conditional rendering with the Transloco pipe. ```html {{ condition ? '67' | transloco : 'dont take' }} ``` -------------------------------- ### Translate '5' Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/findMissingKeys/add-missing-keys/src/1.html This snippet shows how to translate the key '5'. ```html {{ '5' | transloco }} ``` -------------------------------- ### Translate '1' Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/findMissingKeys/add-missing-keys/src/1.html This snippet shows how to translate the key '1'. ```html {{ '1' | transloco }} ``` -------------------------------- ### Translate 'a.b' Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/findMissingKeys/add-missing-keys/src/1.html This snippet shows how to translate the nested key 'a.b'. ```html {{ 'a.b' | transloco }} ``` -------------------------------- ### Translate '4' Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/findMissingKeys/add-missing-keys/src/1.html This snippet shows how to translate the key '4'. ```html {{ '4' | transloco }} ``` -------------------------------- ### Translate 'c.d' Source: https://github.com/jsverse/transloco-keys-manager/blob/master/__tests__/findMissingKeys/add-missing-keys/src/1.html This snippet shows how to translate the nested key 'c.d'. ```html {{ 'c.d' | transloco }} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.