Example Angular Internationalization application
Explore the translated example application
To explore the sample application with French translations used in the Angular Internationalization guide, see
To learn how to run the sample app in English or French, see its readme.md
.
fr-CA
and en-US
example
The following tabs display the example application and the associated translation files.
src/app/app.component.html
src/app/app.component.ts
src/main.ts
src/locale/messages.fr.xlf
<h1 i18n="User welcome|An introduction header for this sample@@introductionHeader">
Hello i18n!
</h1>
<ng-container i18n>I don't output any element</ng-container>
<br />
<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>
<br>
<button type="button" (click)="inc(1)">+</button> <button type="button" (click)="inc(-1)">-</button>
<span i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span>
({{minutes}})
<br><br>
<button type="button" (click)="male()">♂</button>
<button type="button" (click)="female()">♀</button>
<button type="button" (click)="other()">⚧</button>
<span i18n>The author is {gender, select, male {male} female {female} other {other}}</span>
<br><br>
<span i18n>Updated: {minutes, plural,
=0 {just now}
=1 {one minute ago}
other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span>
Last reviewed on Tue Sep 05 2023