This is a library for language translations
npm install ngrj-multilingual
npm install ngrj-multilingual --save
`
import NgxMultilingualService。
`typescript
import {NgxMultilingualService} from "ngrj-multilingual";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
languages: Languages[] = [];
translatedText: string = '';
private readonly destroyRef: DestroyRef = inject(DestroyRef);
private readonly translationService = inject(NgxMultilingualService);
@ViewChild('paragraph', {read: ElementRef}) paragraph: any;
ngOnInit(): void {
this.getLanguages();
}
ngAfterViewInit() {
this.translate(this.paragraph.nativeElement.innerHTML, 'ar');
}
getLanguages(): void {
this.translationService.languages()
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((languages) => {
this.languages = languages;
});
}
translate(text: string, targetLanguage: string): void {
this.translationService.translateText(text, targetLanguage)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((translation) => {
this.translatedText = translation;
}, error => {
console.log('error: ', error)
});
}
}
`
$3
`html
Translator
Microservice architecture is a very popular approach in designing and implementing highly scalable web applications. Communication within a monolithic application between components is usually based on method or function calls within the same process. A microservices‑based application, on the other hand, is a distributed system running on multiple machines.
Translated Section
{{translatedText}}
Supported Languages
{{ lang.name }} [ {{ lang.code }} ]
``