JSFiddle - React, Tailwind, and code Playground

by Jeado

HTML

<div ng-app="app">   
<div class="container-fluid" ng-controller="TestCtrl">
    <p>{{'AGE' | i18n}} <input /></p>
    <p>{{'SALUTATION' | i18n}} <input /></p>
    <p>
        <button ng-click="changeLanguage('de')">{{'GERMAN' | i18n}}</button>       
        <button ng-click="changeLanguage('en')">{{'ENGLISH' | i18n}}</button>     
    </p>
</div>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('TestCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    
    $scope.changeLanguage = function (lang) {
        $rootScope.currentLanguage = lang;
    }

}]);

app.filter('i18n', ['$rootScope', function($rootScope) {
    return function (input) {
        var translations = {
            'de' : {
                'SALUTATION' : 'Anrede',
                'AGE' : 'Alter',
                'GERMAN' : 'Deutsch',
                'ENGLISH' : 'English'
            },
            'en' : {
                'SALUTATION' : 'salutation',
                'AGE' : 'age',
                'GERMAN' : 'german',
                'ENGLISH' : 'english'
            }
        },
        currentLanguage = $rootScope.currentLanguage || 'de';
    
        return translations[currentLanguage][input];
    }
}]);