how to use ngx-translate in angular2+

Question

hi, I want to translate my website in angular2 it contains 7 components: * first the header that contains choose your language * second navbar component * third footer component * fourth login component * fifth register component * sixth home component * seventh sidebar component i want use ngx-translate and thanks in advance

Dev Teywa · Answer

Mukesh Nayak thank you so much it works if i do not bother can you correct me this code my goal is when i choose in select it shows me the list of projects that have in execution import {Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'PhasesPipe' }) export class PhasesPipe implements PipeTransform {phases:any; transform(projetList: any, PhaseSearch: string) { if (projetList && projetList.length) { return projetList.filter( projetList = > { if (PhaseSearch && this.phases.libelle.toLowerCase().indexOf(PhaseSearch.toLowerCase()) === -1) { return false; } return true; }) } else { return projetList; } } }

Mukesh Nayak · Answer

HI , I have done following changes : label > INTITULE PHASE PROJET select #projetphase > option * ngFor = "let ph of projetList[0].phases" [value]="ph.libelle" > {{ ph.libelle}} option > select > label > i think first change you make sure the the name of select from your script it was #projetList which was wrong . Further i have taken first element of your array and taken different phases. Output Regards, Mukesh Nayak

Dev Teywa · Answer

Mukesh Nayak i want to fill select option by phases.libelle my array this.projetList = [ { title: "Titre du projet 01", dateDebut: "21 mars 2017", dateFin: " 01 Janvier 2018", img: "./assets/img/projet_1.jpg", filliale: "BMCE capital", doc_fiche_projet: "../pdf/test_pdf.pdf", responsable: "Resposable projet", taille_fiche_projet: "pdf 4.06 Mo", objectif: "Lorem ipsum dolor sit amet", type_projet: "Organisation", domaine: "Domaine fonctionnel 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", phases: [ { libelle: "planification", code: "planification", img:"./assets/img/icons/icon_planif.png", phaseColor: "color_cyan", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "exécution", code: "execution", img:"./assets/img/icons/icon_execution.png", phaseColor: "color_orange", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Suivi", code: "suivi", img:"./assets/img/icons/icon_suivi.png", phaseColor: "color_pink", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Clôture", code: "cloture", img:"assets/img/icons/icon_cloture.png", phaseColor: "color_pistach", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Bilan d’efficacité", code: "bilan", img:"./assets/img/icons/icon_bilan.png", phaseColor: "color_green", du: "01 mars 2017", au: "02 avril 2018" }], livrablesDemmarage: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesPlanification: [{ title: "Livrable 04", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 05", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 06", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesExecution: [{ title: "Livrable 07", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 09", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 10", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesSuivi: [{ title: "Livrable 11", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 12", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 13", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesCloture: [{ title: "Livrable 14", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 15", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 16", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesBilan: [{ title: "Livrable 17", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 18", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 19", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }] }, { title: "Titre du projet 02", dateDebut: "21 mars 2017", dateFin: " 01 Janvier 2018", img: "./assets/img/projet_2.jpg", filliale: "BMCE capital", doc_fiche_projet: "../pdf/test_pdf.pdf", responsable: "Resposable projet", taille_fiche_projet: "(pdf 4.06 Mo)", objectif: "Lorem ipsum dolor sit amet", type_projet: "Organisation", domaine: "Domaine fonctionnel 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", phases: [{ libelle: "demarrage", code: "demarrage", img:"./assets/img/icons/icon_demarrage.png", phaseColor: "color_yellow", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "planification", code: "planification", img:"./assets/img/icons/icon_planif.png", phaseColor: "color_cyan", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "exécution", code: "execution", img:"./assets/img/icons/icon_execution.png", phaseColor: "color_orange", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Suivi", code: "suivi", img:"./assets/img/icons/icon_suivi.png", phaseColor: "color_pink", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Clôture", code: "cloture", img:"./assets/img/icons/icon_cloture.png", phaseColor: "color_pistach", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Bilan d’efficacité", code: "bilan", img:"./assets/img/icons/icon_bilan.png", phaseColor: "color_green", du: "01 mars 2017", au: "02 avril 2018" }], livrablesDemmarage: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesPlanification: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesExecution: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesSuivi: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesCloture: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesBilan: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }] } ]; my script "phase.checked" > INTITULE PHASE PROJET "let ph of projetList.phases" [value]= "ph.libelle" >{{ ph.libelle}}

Mukesh Nayak · Answer

For me its working . Just share your code

Dev Teywa · Answer

Mukesh Nayak no it doesn't work

Mukesh Nayak · Answer

Hi dev, I think we can go like following : label > Hobbies select #personSelect > option * ngFor = "let hobb of person[0].hobbies" [value]="hobb.title" > {{ hobb.title}} option > select > label > this .person = [{Name: 'maroua' , gender: 'f' , hobbies: [ {title: 'swimming' , description: 'description' }, {title: 'dancing' , description: 'description' }, ]}]; Output Let me know if this works Mukesh Nayak

Dev Teywa · Answer

Mukesh Nayak ah yes, but my teacher forced us to work with array

Mukesh Nayak · Answer

Hi Dev , Considering your question i created a class structure like following : export class Person { Name: string; gender: string; hobbies: Array ; } export class Hobbies { Title: string; Description: string; constructor(tit: string, des: string) { this .Title = tit; this .Description = des; } } and then created the person object accordingly person:Person; constructor() { this .person = new Person(); this .person.Name = "Mukesh" ; this .person.gender = "male" ; this .person.hobbies = new Array (); this .person.hobbies.push( new Hobbies( "title1" , "Description1" )); this .person.hobbies.push( new Hobbies( "title2" , "Description2" )); } Finaly Populated dropdownlist as Hobbies "let hobb of person.hobbies" [value]= "hobb.Title" >{{ hobb.Title}} And then output as : Hope this will help Regards, Mukesh Nayak

Dev Teywa · Answer

Hi, Thank you Can you help on this For example I have a array like this This.person = [{Name: 'maroua', gender: 'f', hobbies: [{title: 'swimming', description: 'description'}]}}]; How can I fill a select option with hobbies.title

Mukesh Nayak · Answer

Hi Dev, I have used information from following sites and created a sample application : "https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2" "https://www.npmjs.com/package/ng2-translate" My application looks like : I have uploaded the src part of the code. Regards, Mukesh Nayak

Dev Teywa · Answer

Manav Pandya i detected this error app.component.ts import { Component } from '@angular/core'; import {Globals} from './globals'; import { TranslateService } from '@ngx-translate/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app' ; constructor(private translate: TranslateService) { translate.setDefaultLang('en'); } switchLanguage(language: string) { this.translate.use(language); } } app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {routes} from './app.routing' import { FormsModule } from '@angular/forms'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; import { AppComponent } from './app.component'; import { NavbarComponent } from './navbar/navbar.component'; import { SidebarComponent } from './sidebar/sidebar.component'; import { FooterComponent } from './footer/footer.component'; import { HomeComponent } from './main/main.component'; import { LoginComponent } from './login/login.component'; import { RegisterComponent } from './register/register.component'; import {Globals} from './globals' import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; import { HttpClientModule, HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); } @NgModule({ declarations: [ AppComponent, NavbarComponent, SidebarComponent, HomeComponent, FooterComponent, LoginComponent, RegisterComponent,AboutComponent,ContactComponent ], imports: [ BrowserModule,routes,FormsModule, HttpClientModule, TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ], providers: [Globals, { provide: LocationStrategy, useClass: HashLocationStrategy }], bootstrap: [AppComponent] }) export class AppModule { } main.component.ts div id = "main-content" > div class = "jumbotron" > span class = "sp" translate > Title span > br /> div > div > navbar.component.ts nav class = "navbar navbar-default navbar-fixed-top" > div class = "container-fluid" > div class = "navbar-btn" > button type = "button" class = "btn-toggle-offcanvas" > i class = "lnr lnr-menu" > i > button > div > div class = "navbar-brand" > a [routerLink]='["/home"]' > Quantum Technologies a > div > div class = "navbar-right" > Translate div class = "btn-group" > a type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" > Choose your language span class = "caret" > span > a > ul class = "dropdown-menu" role = "menu" style = "margin-right: 13px;" > li > button (click)="switchLanguage('en')" > en button > li > li > button (click)="switchLanguage('fr')" > fr button > li > ul > div > div > div > nav >

Dev Teywa · Answer

Manav Pandya but i get this error getlang() undefined

Manav Pandya · Answer

Hello You can get complete help by following below articles : http://www.ngx-translate.com/ https://medium.com/letsboot/translate-angular-4-apps-with-ngx-translate-83302fb6c10d https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1 Thanks sir