Ngx-Multilingual

Simple Ngx-Multilingual library for angular

Usage

1. Install

npm install ngrj-multilingual --save

import NgxMultilingualService。

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)
      });
  }
}

2、Template

<div>
  <h1>Translator</h1>
  <p #paragraph>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.</p>

  <h2>Translated Section</h2>
  <p>{{translatedText}}</p>
  <h2>Supported Languages</h2>
  <p *ngFor="let lang of languages">{{ lang.name }} [ {{ lang.code }} ]</p>
  <hr/>
</div>

3、DOM

This is how the translated page will look like:

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 {Arabic [ ar ]}

ويعد هيكل الخدمات البالغة الصغر نهجا شعبيا للغاية في تصميم وتطبيق تطبيقات شبكة الإنترنت عالية التصعيد. عادة ما يستند الاتصال في إطار تطبيق أحادي بين العناصر إلى أساليب أو مهام في إطار نفس العملية. ومن ناحية أخرى، يوجد نظام موزع يعمل على أجهزة متعددة.

Supported Languages English [ en ]

Arabic [ ar ]

Azerbaijani [ az ]

Catalan [ ca ]

Chinese [ zh ]

Czech [ cs ]

Danish [ da ]

Dutch [ nl ]

Esperanto [ eo ]

Finnish [ fi ]

French [ fr ]

German [ de ]

Greek [ el ]

Hebrew [ he ]

Hindi [ hi ]

Hungarian [ hu ]

Indonesian [ id ]

Irish [ ga ]

Italian [ it ]

Japanese [ ja ]

Korean [ ko ]

Persian [ fa ]

Polish [ pl ]

Portuguese [ pt ]

Russian [ ru ]

Slovak [ sk ]

Spanish [ es ]

Swedish [ sv ]

Thai [ th ]

Turkish [ tr ]

Ukranian [ uk ]

Vietnamese [ vi ]

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)