viernes, 23 de febrero de 2018

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.


import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

declarations: [ AppComponent ],
imports: [
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.


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") {
} else {

public changeLanguage(language) {


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

// canviem l'idioma seleccionat
this.language = language;

imports: [ ... ],
declarations: [ ... ],
exports: [ ...],
providers: [ TranslateService ]

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


{{ 'field' | translate }}

Step 5: Create the json files with the translations.


"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();

private projectService: ProjectService) {
ProjectsComponent.updateStuff.subscribe(res => {
// here fire functions that fetch the data from the api

ngOnInit(): void {

getProjects(): void {
.then(projects =>
{ this.projects = projects }

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

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

public changeLanguage(language) {

I hope you have helped the tutorial.

Any questions, do not hesitate to ask.

miércoles, 7 de febrero de 2018

How to search your web on


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

But we have a problem using Automatically, you will be redirect to your region domain. For example, if you are in Spain, you will be redirect to

For resolving this problem, you can access to the url 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 and searching the words david angular java full stack you will see on the first position of the google link list the domain, which is my english web.

And if you search on and searchs the words david angular java full stack you will see on the first position the domain, which is my spanish web.

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

jueves, 1 de febrero de 2018

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';

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:

    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
    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() { = {
        "firstname": "Nic",
        "lastname": "Raboy",
        "address": {
            "city": "San Francisco",
            "state": "California"

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) {

Only we need now is to pass our form to the like a JSON file on this way: = {
    "requestData": JSON.stringify(requestData)

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


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

Try it and have fun!