create new layout leptonx #6226

when create new layout in abp angular project translate not working , create new component for language by add this code in app.component.ts

this.replaceableComponents.add({ component:LangComponent , key: eThemeLeptonXComponents.Languages });

and add this code in LangComponent

import { AuthService, ConfigStateService, CurrentUserDto, LanguageInfo, NAVIGATE_TO_MANAGE_PROFILE, SessionStateService, } from '@abp/ng.core'; import { Component, Inject } from '@angular/core'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import snq from 'snq'; @Component({ selector: 'app-lang', templateUrl: './lang.component.html', styleUrls: ['./lang.component.scss'] }) export class LangComponent { currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser'); selectedTenant$ = this.sessionState.getTenant$();

languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');

get smallScreen(): boolean { return window.innerWidth < 992; }

get defaultLanguage$(): Observable<string> { return this.languages$.pipe( map( languages => snq( () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName ), '' ) ); }

get dropdownLanguages$(): Observable<LanguageInfo[]> { return this.languages$.pipe( map( languages => snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)), [] ) ); }

get selectedLangCulture(): string { return this.sessionState.getLanguage(); }

constructor( @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile, private configState: ConfigStateService, private authService: AuthService, private sessionState: SessionStateService ) {

}

onChangeLang(cultureName: string) { debugger console.log('lang ==== > ' , cultureName) this.sessionState.setLanguage(cultureName); console.log('lang ==== > ' , cultureName) // location.reload(); } private init() { }

private setInitialLanguage() { } navigateToLogin() { this.authService.navigateToLogin(); }

logout() { this.authService.logout().subscribe(); } }

to work i need to refresh page how can i solve it ?

"dependencies": { "@abp/ng.components": "~7.3.2", "@abp/ng.core": "~7.3.2", "@abp/ng.oauth": "~7.3.2", "@abp/ng.setting-management": "~7.3.2", "@abp/ng.theme.basic": "^7.4.2", "@abp/ng.theme.shared": "~7.3.2", "@angular/animations": "~16.0.0", "@angular/common": "~16.0.0", "@angular/compiler": "~16.0.0", "@angular/core": "~16.0.0", "@angular/forms": "~16.0.0", "@angular/localize": "~16.0.0", "@angular/platform-browser": "~16.0.0", "@angular/platform-browser-dynamic": "~16.0.0", "@angular/router": "~16.0.0", "@angular/service-worker": "~16.0.0", "@elastic/apm-rum-angular": "^3.0.1", "@ngxs/store": "^3.8.1", "@volo/abp.commercial.ng.ui": "~7.3.2", "@volo/abp.ng.account": "~7.3.2", "@volo/abp.ng.audit-logging": "~7.3.2", "@volo/abp.ng.gdpr": "~7.3.2", "@volo/abp.ng.identity": "~7.3.2", "@volo/abp.ng.language-management": "~7.3.2", "@volo/abp.ng.openiddictpro": "~7.3.2", "@volo/abp.ng.saas": "~7.3.2", "@volo/abp.ng.text-template-management": "~7.3.2", "@volosoft/abp.ng.theme.lepton-x": "~2.3.0", "rxjs": "7.5.6", "snq": "^2.0.0", "tslib": "^2.1.0", "zone.js": "~0.13.0" }, "devDependencies": { "@abp/ng.schematics": "~7.3.2", "@angular-devkit/build-angular": "~16.0.0", "@angular-eslint/builder": "~16.0.0", "@angular-eslint/eslint-plugin": "~16.0.0", "@angular-eslint/eslint-plugin-template": "~16.0.0", "@angular-eslint/schematics": "~16.0.0", "@angular-eslint/template-parser": "~16.0.0", "@angular/cli": "~16.0.0", "@angular/compiler-cli": "~16.0.0", "@angular/language-service": "~16.0.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/parser": "^5.36.2", "eslint": "^8.23.0", "jasmine-core": "~4.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.7.0", "ng-packagr": "^16.0.1", "typescript": "~5.0.4" }