DEV Community: Micha

use ngx-translate in angular apps

Micha — Fri, 03 Jun 2022 09:14:06 +0000

This is a small introduction to multi language support in angular by npm package ngx-translate.
First install ngx-translate in your project:

npm install @ngx-translate/core --save

use in your package.json this entries: works at test-time with versions below

"dependencies": {
 "@ngx-translate/core": "^11.0.1",
 "@ngx-translate/http-loader": "^4.0.0"
},

Now you need to add and configure the TranslateModule to your app.module.ts to load the i18n files. Add Import Statments:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { TranslateModule, TranslateLoader, TranslatePipe } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {TranslateService} from "@ngx-translate/core";
import {AppComponent} from './app';

// Translation Loader Factory
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}
@NgModule({
        declarations: [AppComponent],
  imports: [BrowserModule, MatIconModule, HttpClientModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient],
      }
    })],
  exports: [ TranslateModule, TranslatePipe],
  bootstrap: [AppComponent]
})
// >>> add TranslateService to constructor
 export class AppComponent {
             constructor(translate: TranslateService) {
                 translate.setDefaultLang('en');
                 translate.use('en');
             }
 }

You can use the TranslateService in this way in your component and set the default language:

In app.component.ts add this

import { Component } from '@angular/core';
import {TranslateService} from "@ngx-translate/core";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

It make sense to get the default language from your device. Replace the code in constructor with this:

const _defLang = window.navigator.language;
translate.setDefaultLang(_defLang);
translate.use(_defLang);

In your code use TrasnlateService like this:
translate.get('demo.title').subscribe((res: string) => { ... });

In your HTML-view use pipe:
{{ 'demo.title' | translate }}

Create your JSON translation file in assets-folder.
Each language is stored in a separate JSON file.

Add the English translation to file:

assets/i18n/en-EN.json

Use a translation ID for each text.

{
  "demo.title": "Translation demo",
  "demo.text": "This is a simple demonstration app for ngx-translate"
}

Also add a file for german language:
assets/i18n/de-DE.json

{
  "demo.title": "Übersetzungs demo",
  "demo.text": "Das ist eine einfache Beispiel App für ngx-translate."
}

Use this Translation IDs in your components to get the text for the set default language.

I hope this short documentation helps to get in ngx-translate within angular a little bit faster.

refer to:
https://phrase.com/blog/posts/angular-localization-i18n/
https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language
https://simpleen.io/translate-angular-i18n

use chart.js with node

Micha — Tue, 31 May 2022 10:13:44 +0000

With nodeJS you can build a web server which can serve a service or a web app. For example:

var http = require('http');

//create a server object:
http.createServer(function (req, res) {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
}).listen(8080); //the server object listens on port 8080

Chartjs makes it easy to get a graph of some values. Here a example in HTML embedded:

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
var xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:140, y:14},
  {x:150, y:15}
];

new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script>

</body>
</html>

You can dtermine the scale of the axis by:

 scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }

It can be usefull to bring the chart feature to nodeJS for evaluations.
You can integrate this in a nodeJS-server by using a string(_html) for the chart-Call it self.

showChart.js

const fs = require('fs');
var express = require('express');
var app = express();
var path = require('path');
var Chart = require('chart.js');
var result =[3,6,9];
const port = 3000;

app.get('/', function(req, res){
    let _resLine = 'Events: ' + result;
    console.log('show chart:');
    console.log(_resLine);

    _html = "<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>"+
    "<canvas id='bar-chart' width='800' height='450'></canvas>"+
    "<script>"+
    "var logChart = new Chart(document.getElementById('bar-chart'), {"+
    "type: 'horizontalBar',"+
    "data: {"+
      "labels: ['res1', 'res2', 'res3'],"+
      "datasets: ["+
        "{"+
          "label: 'calls',"+
          "backgroundColor: ['#3e95cd', '#8e5ea2','#3cba9f'],"+
          "data: ["+result[0]+","+result[1]+","+result[2]+"]"+
        "}"+
      "]"+
      "},"+
    "options: {"+
      "legend: { display: false },"+
    "scales: {"+
      "xAxes: [{ticks: {min: 0, max:10}}],"+
      "yAxes: [{ticks: {min: 0, max:5}}],"+
     "},"+
      "title: {"+
        "display: true,"+
        "text: 'Events '"+
      "}"+
    "}"+
    "});"+
    "</script>";

    res.send(_html);
});

app.listen(port);

run it with:
node showChart.js

check it on:
http://localhost:3000/

refer to:
https://www.w3schools.com/js/tryit.asp?filename=tryai_chartjs_scatter
https://nodejs.org/api/synopsis.html

Ionic 4 angular router + NavigationExtras interface

Micha — Fri, 27 May 2022 08:52:27 +0000

Example to pass data between components in Ionic 4/angular:
using NavigationExtras interface

Especially when passing data in dialogs there is often no parent/child-relation ship. So you can't pass data in angular way (parent -> child). In Ionic 4/angular you have this feature to pass data comfortable within the router by the interface NavigationExtras.

page1 pass data to page2

page1.ts

import {NavigationExtras, Router} from '@angular/router';
import {Component} from '@angular/core';

@Component({
    selector: 'page1',
    templateUrl: 'page1.html',
    styleUrls: ['page1.scss'],
})
export class Page1 {
    public data: string;
    public value: string;

    constructor(private router: Router) {
    }
    // route page2 and set params in NavigationExtras
    public routePage2() {
        const navigationExtras: NavigationExtras = {
            state: {
                data: this.data,
                value: this.value
            }
        };
        this.router.navigate(['/page2'], navigationExtras);
    }
}

page2.ts

import {ActivatedRoute, Router} from '@angular/router';
import {Component} from '@angular/core';
@Component({
    selector: 'page2',
    templateUrl: 'page2.html',
    styleUrls: ['page2.scss'],
})
export class Page2 {
    public data: string;
    public value: string;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.queryParams.subscribe(params => {
            if (this.router.getCurrentNavigation().extras.state) {
                this.data = this.router.getCurrentNavigation().extras.state.data;
                this.value = this.router.getCurrentNavigation().extras.state.value;
            }
        });
    }
}

refer to: point 4
https://ngrefs.com/router/navigationextras
https://angular.io/api/router/NavigationExtras