JSFiddle - React, Tailwind, and code Playground

by Muhammad Irfan Khan

HTML

<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
 <div ng-app="myApp" ng-controller="MyCtrl">
 
 
 <a href="" target="_blank" ng-click= "changeLanguage('en')">
                        English
                    </a>
                    
                     <a href="" target="_blank"  ng-click= "changeLanguage('fr')">
                        French
                    </a>
                    <p translate>
                    {{WEEK_DAYS}}
                    
                    {{name}}
                    </p>
                    </div>

JavaScript

var myApp = angular.module('myApp', ['pascalprecht.translate']);

myApp.config(function($translateProvider) {
    $translateProvider.preferredLanguage('fr');
    $translateProvider.translations('en', {
        WEEK_DAYS: 'Week days',
        SEARCH: 'Search a day',
        MONDAY: 'Monday',
        TUESDAY: 'Tuesday',
        WEDNESDAY: 'Wednesday',
        THURSDAY: 'Thursday',
        FRIDAY: 'Friday',
        SATURDAY: 'Saturday',
        SUNDAY: 'Sunday'
    });
    $translateProvider.translations('fr', {
        WEEK_DAYS: 'Jours de la semaine',
        SEARCH: 'Chercher un jour',
        MONDAY: 'Lundi',
        TUESDAY: 'Mardi',
        WEDNESDAY: 'Mercredi',
        THURSDAY: 'Jeudi',
        FRIDAY: 'Vendredi',
        SATURDAY: 'Samedi',
        SUNDAY: 'Dimanche'
    });
});



myApp.controller('MyCtrl', function($scope, $translate, weekDays) {
    $scope.changeLanguage = function(key) {
        $translate.uses(key)   
    }
    $scope.name = "irfan";
    
});