lizzymendivil

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { addLocaleData, IntlProvider } from 'react-intl';
import * as locale_en  from 'react-intl/locale-data/en';
import * as locale_es from 'react-intl/locale-data/es';
const en = require('./i18n/locales/en.json');
const es = require('./i18n/locales/es.json');
import { flattenMessages } from './utils';

lizzymendivil

{
  "common.options": {
    "add": "Add",
    "save": "Save"
  },
  
  "common.label": {
    "yes": "Yes",
    "no": "No",
    "ok": "OK"

lizzymendivil

import { FormattedMessage } from 'react-intl';
.
.
.
<Grid container={true} alignItems='center'>
  <Grid item={true} xs={6}>
    <FormControlLabel
      classes={{root: this.props.classes.rememberText}}
      control={<Checkbox color='primary' />}
      label={<FormattedMessage id="sign.in.remember.me" />}

lizzymendivil

export function flattenMessages(nestedMessages, prefix = '') {
  return Object.keys(nestedMessages).reduce((messages, key) => {
  const value       = nestedMessages[key];
  const prefixedKey = prefix ? `${prefix}.${key}` : key;
  if (typeof value === 'string') {
    messages[prefixedKey] = value;
  } else {
    Object.assign(messages, flattenMessages(value, prefixedKey));
  }
  return messages;

lizzymendivil

import { BrowserModule } from '@angular/platform-browser';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import { NgModule } from '@angular/core';

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

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

export function HttpLoaderFactory(http: HttpClient) {

lizzymendivil

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 {

lizzymendivil

{
  "demo": 
  {
    "by": "By Lizzy Mendivil",
	"english": "English",
	"forgot_password": "Forgot password?",
	"not_member": "Not a member?",
	"password": "Password",
	"remember": "Remember me",
	"signin": "Sign in",

lizzymendivil

<div class="mr-5 mb-5 d-flex justify-content-end">
  <button class="mr-2 btn bg-danger text-white text-uppercase" (click)="switchLanguage('en')">{{ 'demo.english' | translate
    }}</button>
  <button class="btn bg-danger text-white text-uppercase" (click)="switchLanguage('es')">{{ 'demo.spanish' | translate }}</button>
</div>

lizzymendivil

 <md-dialog-content>
      <div class="md-dialog-content-bu">
         <p class="md-body-2">{{ 'main.business_units.delete.CONFIRM' | translate }}</p>
         <md-input-container class="md-block">
             <label>{{ 'main.business_units.delete.ENTER_PASSWORD' | translate }}</label>
             <input id="business-unit-name-input"
                    name="password"
                    type="{{ businessUnitDeleteFormController.typePassword ? 'text' : 'password' }}"
                    ng-model="businessUnitDeleteFormController.password"
                    required

lizzymendivil

togglePassword() {
    this.typePassword = !this.typePassword;
}