AngularJs Archives

Recently I get with a requirement to dynamically change input box width respective to the placeholder length. Now I am going to give a small heads up about use case and how I accomplished the task.

Mission:

This application is developed with angularJs. As it has multiple language support placeholder also changes respective to the language. For some of the language, placeholder is not fully visible and for some of the language, the input box width was too large compared to the placeholder. So here the mission is to dynamically change the width of the input box respective to the placeholder length.

Mission Accomplished.

To accomplish the above mission I create a custom directive to change the width of the input box dynamically. Here the challenge is to find the width of the placeholder. The length property of the placeholder will give you the character count. Using that we can’t able to find the element width of the placeholder text.

In this directive, I used two key things to find the width of the placeholder text

Font size – this will get the current font size used in the input box
<span> – Sudo element to calculate the actual element width of the placeholder

Calculating the Font Size

The below given js code will return the font size used in the input box which invoked this directive

var fontSize = parseFloat(window.getComputedStyle(elem[0], null).getPropertyValue('font-size'));

Pseudo Element

After that dynamically create a pseudo element with the style of above identified font size because this will help us to get the exact width of the placeholder content. Once the process of identifying the width is donr then the pseudo element got removed from the DOM.

Options

minwidth – in addition, this attribute will set the minimum width for the input box

bufferwidth – in addition, this attribute will add buffer with for input box for better readability and appearance.

Angular Directive to Dynamically Adjust input box width respective to the placeholder length

Code Snippet

See the Pen Angular Directive to Dynamically Adjust input box width respective to the placeholder length by icodefy (@icodefy) on CodePen.

You can find the working snippest here. Drop your suggestion and valuble comments.

Localize your Angularjs Project is so simple, Angularjs has its own l10n & i18n scripts which are responsible for localizing the date, number and currency into your project but it has some restrictions with it. If you want to load specific locale library from angular js it can be done it by adding the corresponding locale via the script tag. But in case if you want to change the locale or language inside the application while it is running without reloading the page then here comes a simple solution.

Mission

The mission is to implement localization into the project without injecting any third party modules “angular-translate” into our application.

Mission Accomplished

Now am going to brief how I implemented localization manually

Creating resource.json for the different language which holds all your translation as a json object.
Get the JSON data using “$resource” and assign it to an object under “$rootScope”.
Copy new locale object of corresponding to the language to $locale.

Creating separate resource JSON

I created a separate folder which holding the localization object for the different object. The final level holds the name of the Locale Id, which is going to decide in what language our application renders.

This is how the folder Structure for resource.json created

This resource.json holds all the static value of my app. In all my HTML I use the key to rendering corresponding value.

whenever the user changes the language I get the unique language ID and make a $resource call and get the appropriate resource.json to render the values in selected language.

The same resource.json holds my locale object which is responsible for the date, number & currency formats.

Angular Js localization module on GitHub

Access the above mention URL and open the required language JS and copy the locale object from corresponding js to your resource.json

sample resource.json with Static & locale values for the German language.

{
 "indexPage": {
    "welcomeNote": "Willkommen bei icodefy",
    "followUs": "Folge uns"
    },
 "homeMenu": {
    "home": "Zuhause",
    "aboutUs": "Über uns"
    },
"locale": {
"DATETIME_FORMATS": {
"AMPMS": [
"vorm.",
"nachm."
],
"DAY": [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
],
"ERANAMES": [
"v. Chr.",
"n. Chr."
],
"ERAS": [
"v. Chr.",
"n. Chr."
],
"FIRSTDAYOFWEEK": 0,
"MONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"SHORTDAY": [
"So.",
"Mo.",
"Di.",
"Mi.",
"Do.",
"Fr.",
"Sa."
],
"SHORTMONTH": [
"Jan.",
"Feb.",
"M\u00e4rz",
"Apr.",
"Mai",
"Juni",
"Juli",
"Aug.",
"Sep.",
"Okt.",
"Nov.",
"Dez."
],
"STANDALONEMONTH": [
"Januar",
"Februar",
"M\u00e4rz",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
"WEEKENDRANGE": [
5,
6
],
"fullDate": "EEEE, d. MMMM y",
"longDate": "d. MMMM y",
"medium": "dd.MM.y HH:mm:ss",
"mediumDate": "dd.MM.y",
"mediumTime": "HH:mm:ss",
"short": "dd.MM.yy HH:mm",
"shortDate": "dd.MM.yy",
"shortTime": "HH:mm"
},
"NUMBER_FORMATS": {
"CURRENCY_SYM": "\u20ac",
"DECIMAL_SEP": ",",
"GROUP_SEP": ".",
"PATTERNS": [{
"gSize": 3,
"lgSize": 3,
"maxFrac": 3,
"minFrac": 0,
"minInt": 1,
"negPre": "-",
"negSuf": "",
"posPre": "",
"posSuf": ""
}, {
"gSize": 3,
"lgSize": 3,
"maxFrac": 2,
"minFrac": 2,
"minInt": 1,
"negPre": "-",
"negSuf": "\u00a0\u00a4",
"posPre": "",
"posSuf": "\u00a0\u00a4"
}]
},
"id": "de-de",
"localeID": "de_DE"
}
}

Get resource.json Data using $resource and copy to $locale

Whenever the user changes the value in the language dropdown I call the appropriate file URL using $resource request and get the resource.json and reassign it back the $rootScope.l10n which hold all the static value of the application.

Here $rootScope.lang is the value bind from the language dropdown which is changed by user.

$resource('/app/l10n/' + $rootScope.lang + '/resources.json')
  .get(function (data) {
            $rootScope.l10n = data;
            // inject LocaleFactory in controller
            LocaleFactory.setLocale($rootScope.l10n.locale);
        });

LocaleFactory is created for the component reusability. The angular.copy function can also call directly.

.factory('LocaleFactory', function ( $locale ){
 return {
  setLocale: function (currentLocaleObj) {
  angular.copy(currentLocaleObj, $locale);
 }
};

Drop your valuable comments and improvement suggestions in the comment section.

Tag: AngularJs

Angular directive that dynamically change input box width respective to the placeholder