I Have a problem in using abpLocaliztion pipe,
I created a service responsible for the localization which use “SessionStateService”
import { SessionStateService } from '@abp/ng.core';
setLanguage(newLanguage: Language) {
this.sessionStateService.setLanguage(newLanguage.code);
this.updateLanguageState({
...this.languageState.getValue(),
language: newLanguage,
});
}
and here is my configuration in app-module:
@NgModule({
imports: [
CoreModule.forRoot({
environment,
registerLocaleFn: registerLocale(),
}),
],
})
here is the login component which i need to translate :
@NgModule({
declarations: [LoginComponent],
imports: [
CommonModule,
LoginRoutingModule,
ReactiveFormsModule,
CoreModule.forChild({
localizations: [
{ culture: 'en', resources: [{ resourceName: 'Login', texts: en }] },
{ culture: 'ar', resources: [{ resourceName: 'Login', texts: ar }] },
],
}),
AccountModule,
MatInputModule,
MatFormFieldModule,
MatCheckboxModule,
MatIconModule,
MatButtonModule,
],
})
export class LoginModule {}
and here is the HTML :
<form class="form-body" [formGroup]="loginForm" (ngSubmit)="login()">
<div class="bg-white border-radius box-shadow pt-20 ps-20 pe-20">
<div class="mb-25">
<h1 class="font-header-lg">
{{ "Login::PageTitle" | abpLocalization }}
</h1>
<p class="font-body-lg">
{{ "Login::PageTagline" | abpLocalization }}
</p>
</div>
<!-- email control -->
<div class="tagus-form-group without-icon">
<mat-form-field appearance="outline">
<mat-label>
{{ "Login::EmailAddress" | abpLocalization }}
</mat-label>
<input matInput formControlName="username" />
@if (loginForm.controls['username'].hasError('required')) {
<mat-error>
{{ "Login::EmailOrUsernameIs" | abpLocalization }}
<strong>{{
"Login::EmailRequired" | abpLocalization
}}</strong>
</mat-error>
}
</mat-form-field>
</div>
<!-- password control -->
<div class="tagus-form-group without-icon">
<mat-form-field appearance="outline">
<mat-label>
{{ "Login::Password" | abpLocalization }}
</mat-label>
<input
matInput
[type]="isPasswordHidden ? 'password' : 'text'"
formControlName="password"
/>
<button
type="button"
mat-icon-button
matSuffix
[attr.aria-label]="'Login::ShowPassword' | abpLocalization"
[attr.aria-pressed]="isPasswordHidden"
(click)="isPasswordHidden = !isPasswordHidden"
>
<mat-icon>
{{ isPasswordHidden ? "visibility_off" : "visibility" }}
</mat-icon>
</button>
@if (loginForm.controls['password'].hasError('required')) {
<mat-error>
{{ "Login::PasswordIs" | abpLocalization }}
<strong>{{
"Login::PasswordRequired" | abpLocalization
}}</strong>
</mat-error>
}
</mat-form-field>
</div>
</div>
<!-- remember me & forgot password -->
<div
class="remember-and-forgot-password d-flex align-items-center justify-content-space-between gap-2 mt-15"
>
<mat-checkbox
class="remember-me-checkbox font-body-lg"
formControlName="rememberMe"
>
{{ "Login::RememberMe" | abpLocalization }}
</mat-checkbox>
<a
routerLink="/account/forgot-password"
class="forgot-password-link d-inline-block main-color font-link-lg"
>
{{ "Login::ForgotYourPassword" | abpLocalization }}
</a>
</div>
<!-- submit button -->
<button
class="tagus font-button-lg text-center w-100 mt-20"
type="submit"
mat-flat-button
[disabled]="loginForm.invalid"
>
{{ "Login::Login" | abpLocalization }}
</button>
</form>
I created a local translations files :
i18n:
which has JSON files for both of the languages
-I succeeded in calling abp localization endpoint :
and the response after changing the language is returns successfully
-whether im using the local translation or the abp api translation
it doesn’t reflect on the UI, only reflects if i refreshed the app