Internationalization in Angular

Here we come again!

Today we will learn how to implement the internationalization in angular easily and in a few steps.

Step 1: Add the necessary libraries to our package.json file.

"dependencies": {

...

"@ngx-translate/core": "8.0.0",

"@ngx-translate/http-loader": "2.0.0",

...

},

Step 2: Configure our application to use a folder of language files.

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({

declarations: [ AppComponent ],

imports: [

...

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: (createTranslateLoader),

deps: [HttpClient]

}

})

...

],

providers: [ ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

export function createTranslateLoader(http: HttpClient) {

return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

Step 3: Define a component where you can change the language.

language;

languages: Language[] = [

new Language("ca","CATALÀ"),

new Language("es","ESPAÑOL"),

new Language("en","ENGLISH")

];

constructor(private route: ActivatedRoute,

private translate: TranslateService) {

var userLang = "";

this.route.queryParams.subscribe(params => {

if(!params['lang'] || params['lang'] == "") {

userLang = this.language;

} else {

userLang = params['lang'];

}

console.log("queryParams:" + userLang);

if(!userLang || userLang == "") {

userLang = navigator.language;

}

if(userLang) {

userLang = userLang.toLowerCase();

if(userLang.length > 2) {

userLang = userLang.substring(0, 2);

}

}

if(userLang == "ca" || userLang == "es" || userLang == "en") {

this.changeLanguage(userLang);

} else {

this.changeLanguage("ca");

}

});

}

public changeLanguage(language) {

console.log(language);

// canviar l'idioma per defecte usat a les traduccions

this.translate.setDefaultLang(language);

// canviar l'idioma a usar per fer les traduccions

this.translate.use(language);

// canviem l'idioma seleccionat

this.language = language;

}

@NgModule({

imports: [ ... ],

declarations: [ ... ],

exports: [ ...],

providers: [ TranslateService ]

})

Step 4: Use the Pipe translate to get the translations of the language files.

pageComponent.html

...

{{ 'field' | translate }}

...

Step 5: Create the json files with the translations.

en.json

{

"field": "traduction of my first field"

}

Here we could make all the necessary translations in our pages and components.

If we wanted that when choosing a language, the other components and pages of our application were translated, where we had loaded arrays of information, we should do the following:

Step 1: Subscribe an Observable where to load the array.

projects: Project[];

public static updateStuff: Subject<any> = new Subject();

constructor(

private projectService: ProjectService) {

ProjectsComponent.updateStuff.subscribe(res => {

// here fire functions that fetch the data from the api

this.getProjects();

});

}

ngOnInit(): void {

this.getProjects();

}

getProjects(): void {

this.projectService.getProjects()

.then(projects =>

{ this.projects = projects }

);

}

Step 2: Call the Subscription when we change the language.

import { ProjectsComponent } from '../projects/projects.component';

public changeLanguage(language) {

...

ProjectsComponent.updateStuff.next(false);

...

}

I hope you have helped the tutorial.

Any questions, do not hesitate to ask.

Bind json data to tree component with Angular 2

Here we come again!

Today with news of a useful component that can shows you the way to continue your own components in Angular2.

Here you can see the demo (click the Project link button).

We have two components: the tree component and the node component (the tree component is an array of node components).

Take a look to the tree.component (html and css files):



And here is the ts file:



You can see that we don't need a css file and the html iterate an array of node and calls the app-node-tree with the root properties.

Now take a loot to node.component (html and css files):



Here we can see the styles of my node, setting the div and img style's and the html file. There is a div with the images that we have to load on the node and later we iterate the array of children of the node.

We use a recursive component, because we call the aap-node-tree in an app-node-tree.

Take a look to ts file:



In this Typescript file we load the node with the loadNode method. The ancestors and the property lastNode indicates whether the node is the last sibling of the same parent.

There is a method that change the state between expand and collapse of the image in the node.

At last, we will see the tree.json file with the structure of our tree, that we can change with the structure we want:



On my example, we have to repeat this structure three times and we will get our tree.

I hope you find this article interesting!

Here you can see the example.

This example is done with Angular-cli.

Here you can find the repository of the component done by @davidnezan.

Try it and have fun!

Bind json data to html table with Angular 2

Here I come again!

In this example I will show how to bind a JSON file with an html table with Angular2 (the new version of AngularJS, but with Typescript).

Here you can see the demo (click the Project link button).

We need a Service Object and a Component Object and I'm going to use Angular-cli to create them.

First of all, take a look to Service class:

(we will create them with: ng generate service [my.servicename.service])

And I make the next modifications:

The Service returns an Observable of any type, that makes asyncron the call from the Component. So you can extend the code by using any structure of JSON file and making some modifications.

Now I will show you the Component, that we will create with the instruction (ng generate component [componentname.component]):

 

The Component will call our Service and save the information of the JSON file.

Now comes the HTML file and the CSS file:



Here you can see the use of ngFor, the declaration of a variable with "let" and the attribute "async" that makes asyncron our request.

The JSON file will look like this. You can put the attributes you want, but it's important that the HTML file have the sames name of the JSON file's attributes.



And finally, I can show you the structure of the project that has been done with Angular-Cli, as I said in the beginning.



This is my Git Repository where I push this project and you can get it: https://github.com/davidmartinezros/bind-json-array-to-html-table.

Thanks for reading me, I hope it will help you!

Try it and have fun!