JSFiddle - React, Tailwind, and code Playground

by Dhiraj Sharma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js"></script>
<div ng-app='MultilingualApp'>
    <div ng-controller='MyCtrl'>
        <h3>{{'GREETING'|translate}}</h3>

        <p>{{'DESCRIPTION'|translate}}</p>
        <label>{{'LBL_SWITCH'|translate}} </label><br>
        <button ng-click='changeLanguage()'> {{'CLICK'|translate}}</button>
    </div>
</div>

JavaScript

var MultilingualApp = angular.module("MultilingualApp", ["pascalprecht.translate"]);

MultilingualApp.config(function ($translateProvider) {
    $translateProvider.translations("US_EN", {
        "GREETING": "Hello !!!",
        "DESCRIPTION": "This is a demo app for multilingual support.",
        "LBL_SWITCH": "Click here for switching language between spanish to english",
        "CLICK": "Click"
    });
    $translateProvider.translations("SPANISH", {
        "GREETING": "Hola !!!",
        "DESCRIPTION": "Esta es una aplicacion de demostracion para soporte multilingue",
        "LBL_SWITCH": "Haga clic aquĂ­ para cambiar el idioma entre espanol al Ingles",
        "CLICK": "Clic"
    });
    $translateProvider.preferredLanguage("US_EN");
});

MultilingualApp.controller("MyCtrl", function ($scope, $translate) {
    $scope.changeLanguage = function () {
        var language = $translate.use();
        if (language === "US_EN") {
            $translate.use("SPANISH");
        } else {
            $translate.use("US_EN");
        }
    };
});