angular translate
Hi,
I want to translate below "message" according to the selected language, but I dont find a way to do so? Can I do it in the html file itself?
using "{{ "AUTH.VALIDATE.REQUIREDMESSAGE" | translate }}" gives error to me.
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
validation: 'required',
message: 'Password is required',
control: loginForm.controls['password']
}"></ng-container>
Replies (7)
Hi Rohan,
To use Angular Translate, you need to first make sure you have installed the necessary packages and set up the translation files for the languages you want to use.
Once you have done that, you can use the translate pipe in your HTML files like this:
{{ "AUTH.VALIDATE.REQUIREDMESSAGE" | translate }}This assumes that you have a translation key
AUTH.VALIDATE.REQUIREDMESSAGE defined in your translation files for the currently selected language. If the translation key is not found in the current language file, it will fallback to the default language file.Make sure you have imported the
TranslateModule in your app module and initialized the translation service. You can also set the default language and the fallback language in the forRoot() method when importing the TranslateModule.If you are still having issues, please provide more information about your setup and any error messages you are receiving.
Thanks
That translate format is not working in the below file and place:
src\app\modules\auth\components\login\login.component.html
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
validation: 'required',
message: 'Email is required',
control: loginForm.controls['email']
}"></ng-container>
I want "message: 'Email is required'" to come from translation file.
Hi Rohan,
The translation functionality should work on the login page. However, please note that the language selection option is available in the dashboard. You can refer to this screenshot for the location of the language selection: 
If you want to change the language programmatically from the login page, you can use the following steps:
1. Import the TranslationService into the LoginComponent.
2. Use the following method to set the language: this.translationService.setLanguage('en'); (replace 'en' with the desired language code).
3. Please note that the available languages in the demo are: en, zh, es, ja, de, fr.
Let me know if you have any further questions or concerns.
Thanks
Hey Faizal,
Sorry if I am not clearly stating my problem.
I am able to localize the label control but not able to localize validation messages for the email text box on login page.
<label class="form-label fs-6 fw-bolder text-dark">{{ "AUTH.INPUT.EMAIL" | translate }}</label>
<input class="form-control bg-transparent" type="email" name="email" formControlName="email" autocomplete="off"
[ngClass]="{
"is-invalid": loginForm.controls["email"].invalid,
"is-valid": loginForm.controls["email"].valid
}" />
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
validation: "required",
message: "Email is required",
control: loginForm.controls["email"]
}"></ng-container>
</div>So, for example above I am able to apply AUTH.INPUT.EMAIL for translation.
My question is, how can I achieve similar translation for message: 'Email is required' ?
I want "Email is required" to be supplied from the language file. (also is it possible to have parameterized translation like "{{controlname}} is not valid" ?)
Hi Rohan,
To move the message "Email is required" into the translation file, you can follow these steps:
1. Create a key-value pair for the message in your translation file. For example, in your en.json file, add the following. You can also use parameterized translation in the following way:
"AUTH.VALIDATION.INVALID": "{{controlname}} is not valid"2. Update the message property in your ngTemplateOutletContext to use the translation key instead of the hardcoded string:
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
validation: "invalid",
message: "AUTH.VALIDATION.INVALID",
control: loginForm.controls["email"],
params: { controlname: "Email" }
}"></ng-container>This will use the translation value for the key
AUTH.VALIDATION.REQUIRED as the message.This will replace
{{controlname}} in the translated string with the value "Email".Thanks
Hi Faizal,
<a target="_blank" href="https://drive.google.com/file/d/1ufGNe0IhzBoHvYL-aYLXNV4u296GfFCy/view?usp=sharing">Image 1</a>
<a target="_blank" href="https://drive.google.com/file/d/1kbP4s4DYqrAtfn6N5VXR34x2KyxN1K4c/view?usp=sharing">Image 2</a>
<a target="_blank" href="https://drive.google.com/file/d/13MxL-tBebfPhx2ZYJjzJNOgezezJHGMk/view?usp=sharing">Image 3</a>
Please open above images in browser, I am not able to attach them in the editor here.
And as you could see, I have done required changes as you suggested, but still its not working for validation message. Please let me know if you want further details from my side.
Good news is: the label "Email" is already coming from translation file, but not the validation message.
Please help bro.
Hi Rohan,
Apologies for the confusion earlier. Here's the corrected approach to translate text programmatically in Angular using the `TranslateService`:
1. Import the necessary modules and services:
import { TranslateService } from "@ngx-translate/core";2. Inject the `TranslateService` in your component's constructor:
constructor(public translateService: TranslateService) { }3. Use the `translateService.instant()` method to translate the text programmatically:
const translatedMessage = this.translateService.instant("AUTH.VALIDATION.INVALID");4. In your template, assign the translated message to the `message` property:
<ng-container [ngTemplateOutlet]="formError" [ngTemplateOutletContext]="{
validation: "required",
message: translatedMessage,
control: loginForm.controls["email"]
}"></ng-container>Thanks
