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.

How to search your web on google.com

Hi,

Like all people know, google have a domain for region. For example, for searching your web on google in Spain you have to use https://www.google.es, for searching your web in USA you have to use https://www.google.com.

But we have a problem using https://www.google.com. Automatically, you will be redirect to your region domain. For example, if you are in Spain, you will be redirect to https://www.google.es.

For resolving this problem, you can access to the url https://www.google.com/ncr and you could use the USA domain and you can investigate your SEO in America and how are you publishing there.

For example, acceding to https://www.google.com/ncr and searching the words david angular java full stack you will see on the first position of the google link list the domain https://davidmartinezros.com/dashboard?lang=en, which is my english web.

And if you search on https://www.google.es and searchs the words david angular java full stack you will see on the first position the domain https://davidmartinezros.com/dashboard?lang=es, which is my spanish web.

If you have any question, ask me on the comments.

How to Use Forms in Angular 2 passing complex data objects between pages

Hi everybody!

Today we are going to explain how to pass form data object like a complex object between pages in Angular 2 or 4 or 5.

First of all, we have to declare our Data object like an injectable, on this way:

import { Injectable } from '@angular/core';

@Injectable()
export class Data {
    public storage: any;
    public constructor() { }
}

Then, we have to declare our Data object like a provider in our ngModule class file configuration, on this way:

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
    providers: [Data]
})
class AppComponentModule {}

Then we can use this Data object in our pages.

First of all, we are going to define this in our first page, the origin one:

public constructor(private router: Router, private data: Data) {}

public navigationToPage2() {
   this.data.storage = {
        "firstname": "Nic",
        "lastname": "Raboy",
        "address": {
            "city": "San Francisco",
            "state": "California"
}
   }
   this.router.navigate(["page2"]);
}

And then, we will get the Data object in our second page, which receive the request of our form POST:

public constructor(private data: Data) {
    console.log(JSON.stringify(this.data.storage));
}

Only we need now is to pass our form to the this.data.storage like a JSON file on this way:

this.data.storage = {
    "requestData": JSON.stringify(requestData)
};

And the get the Data on the second page this way:

console.log(this.data.storage.requestData);

I hope you have found it useful and that you have solved your problems.

Try it and have fun!