How to Translate Website content in Angular

April 30, 2023April 30, 2023 M-SoftTech 0 Comments

Hello friends welcome to M-softtech in today video I will teach how to translate our website content in multi languages help of ngx-transalter

Create an Angular project

For this tutorial you’ll start with a simple demo application. I assume that you already have basic knowledge of Angular… You can, of course, skip this step and use your existing project.

Create an empty new project:

<code>npx -p @angular/cli ng new projectname</code>

Finally, start the new project:

ng serve

Step 1: Add ngx-translate your Angular application

If you’ve followed the into step, abort the server with CTRL-C.

Enter the following line in the terminal:

<code>npm install @ngx-translate/core @ngx-translate/http-loader</code>

The @ngx-translate/core contains the core routines for the translation: The TranslateService, the translate pipe and more.

The @ngx-translate/http-loader loads the translation files dynamically from your webserver.

Step 2: Set up the TranslateModule and TranslateService

Appmodule.ts

The required changes to that file are comment above

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,

        // ngx-translate and the loader module
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http);
}

The HttpLoaderFactory function is required for AOT (ahead of time) compilation in your project.

Now switch to app.component.ts :

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 {

  title = 'lang-translate';
  
  
 
	//inject transalte service our constructor
  constructor(private translate:TranslateService){
   //select default language you can change according to your need
    this.translate.setDefaultLang('en');
    }

      selectLanguage(event:any){
        this.translate.use(event.target.value);
      
      }
      
}

App.component.html

<div>{{'data.language' | translate}}</div>
<select  (change)="selectLanguage($event)">
  <option value="en">{{'data.english' | translate}}</option>
  <option value="nl">{{'data.hindi' | translate}}</option>
</select>
  
  <h2 >{{'data.details' | translate }}</h2>

Assets folder inside create a new folder. give the folder name is i18n and then create two json file inside this folder that file name according to your language code.

en.json

{
  "data":  {
    "details":"welcome to langulage translater",
    "english":"english",
    "hindi":"hindi",
    "language":"Choose Your Language"
}
   
}

nl.json

{
    "data":  {
    "details":"भाषा अनुवादक में आपका स्वागत है",
    "english":"अंग्रेज़ी",
    "hindi":"हिंदी",
    "language":"अपनी भाषा चुनें"
}
    
}

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts.

if you have any confusion Comment below or you can contact us by filling out our contact us.

YOU MIGHT ALSO LIKE

How To Create A Website Using HTML And CSS Step By Step Website Tutorial

How to make a dashboard Design Using html CSS

If you have any problem to understand this code you can watch also video tutorial