Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: add examples for localize (#57534)

Browse source 
PR Close #57534
This commit is contained in:
Santosh Yadav 2024-09-10 22:19:56 +02:00 committed by Jessica Janiuk
parent c4b19c4d43
commit fa4107e413
4 changed files with 44 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
adev/src/content/examples/i18n/src/app/app.component.html
View file

@ -33,3 +33,8 @@
other {{{ minutes }} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span>
<!--#enddocregion i18n-nested-->
<br><br>
<!--#docregion i18n-conditional-->
<button type="button" (click)="toggleDisplay()">Toggle</button>
<div i18n [attr.aria-label]="toggleAriaLabel()">{{toggle()}}</div>
<!--#enddocregion i18n-conditional-->

13
adev/src/content/examples/i18n/src/app/app.component.ts
View file

@ -1,5 +1,6 @@
// #docregion
import {Component} from '@angular/core';
import {Component, computed, signal} from '@angular/core';
import {$localize} from '@angular/localize/init';
@Component({
standalone: true,
@ -11,6 +12,13 @@ export class AppComponent {
gender = 'female';
fly = true;
logo = '${this.baseUrl}/angular.svg';
toggle = signal(false);
toggleAriaLabel = computed(() => {
return this.toggle()
? $localize`:Toggle Button|A button to toggle status:Show`
: $localize`:Toggle Button|A button to toggle status:Hide`;
});
inc(i: number) {
this.minutes = Math.min(5, Math.max(0, this.minutes + i));
}
@ -23,4 +31,7 @@ export class AppComponent {
other() {
this.gender = 'other';
}
toggleDisplay() {
this.toggle.update((toggle) => !toggle);
}
}

6
adev/src/content/guide/i18n/manage-marked-text.md
View file

@ -32,7 +32,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
<docs-code language="typescript">
variableText1 = $localize `:@@introductionHeader:Hello i18n!`;
variableText1 = $localize`:@@introductionHeader:Hello i18n!`;
</docs-code>
@ -58,7 +58,7 @@ The following example defines the `introductionHeader` custom ID and description
<docs-code language="typescript">
variableText2 = $localize `:An introduction header for this sample@@introductionHeader:Hello i18n!`;
variableText2 = $localize`:An introduction header for this sample@@introductionHeader:Hello i18n!`;
</docs-code>
@ -72,7 +72,7 @@ The following example defines the `introductionHeader` custom ID for a variable.
<docs-code language="typescript">
variableText3 = $localize `:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
variableText3 = $localize`:site header|An introduction header for this sample@@introductionHeader:Hello i18n!`;
</docs-code>

30
adev/src/content/guide/i18n/prepare.md
View file

@ -29,6 +29,16 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/doc-files/app.component.html" visibleRegion="i18n-attribute"/>
### using conditional statement with `i18n`
The following `<div>` tag will display translated text as part of `div` and `aria-label` based on toggle status
<docs-code-multifile>
<docs-code header="src/app/app.component.html" path="adev/src/content/examples/i18n/src/app/app.component.html" visibleRegion="i18n-conditional"/>
<docs-code header="src/app/app.component.ts" path="adev/src/content/examples/i18n/src/app/app.component.ts" visibleLines="[[14,16],[17,24],[37,39]]"/>
</docs-code-multifile>
### Translate inline text without HTML element
Use the `<ng-container>` element to associate a translation behavior for specific text without changing the way text is displayed.
@ -82,7 +92,7 @@ Use the [`$localize`][ApiLocalizeInitLocalize] tagged message string to mark a s
<!--todo: replace with docs-code -->
<docs-code language="typescript">
$localize `string_to_translate`;
$localize`string_to_translate`;
</docs-code>
The i18n metadata is surrounded by colon \(`:`\) characters and prepends the translation source text.
@ -90,7 +100,7 @@ The i18n metadata is surrounded by colon \(`:`\) characters and prepends the tra
<!--todo: replace with docs-code -->
<docs-code language="typescript">
$localize `:{i18n_metadata}:string_to_translate`
$localize`:{i18n_metadata}:string_to_translate`
</docs-code>
### Include interpolated text
@ -100,15 +110,23 @@ Include [interpolations](guide/templates/binding#render-dynamic-text-with-text-i
<!--todo: replace with docs-code -->
<docs-code language="typescript">
$localize `string_to_translate ${variable_name}`;
$localize`string_to_translate ${variable_name}`;
</docs-code>
### Name the interpolation placeholder
<docs-code language="typescript">
$localize `string_to_translate ${variable_name}:placeholder_name:`;
$localize`string_to_translate ${variable_name}:placeholder_name:`;
</docs-code>
### Conditional syntax for translations
<docs-code language="typescript">
return this.show ? $localize`Show Tabs` : $localize`Hide tabs`;
</docs-code>
## i18n metadata for translation
<!--todo: replace with docs-code -->
@ -143,7 +161,7 @@ The following example shows the value of the [`$localize`][ApiLocalizeInitLocali
<docs-code language="typescript">
$localize `:An introduction header for this sample:Hello i18n!`;
$localize`:An introduction header for this sample:Hello i18n!`;
</docs-code>
@ -166,7 +184,7 @@ The following code example shows the value of the [`$localize`][ApiLocalizeInitL
<docs-code language="typescript">
$localize `:site header|An introduction header for this sample:Hello i18n!`;
$localize`:site header|An introduction header for this sample:Hello i18n!`;
</docs-code>