Month: May 2017

Angular: Manually update an input model but not the view

Angular: Manually update an input model but not the view


I’ve connected the google place autocomplete to an input field.

Well, while the input shows something like “Milano, MI, Italia”, I want to send to the API just the place_id (that the server will validate again by using the maps api)
Surely, I need to update the model and define a remote validator to set the field as valid.

The manual update is made by the setValue method.
By setting {emitModelToViewChange: false} I avoid the view gets updated.

That’s all!

 

How to calculate the file size from a base64 string in javascript

How to calculate the file size from a base64 string in javascript

A base64 string looks like this:
data:​image/​png;​base64,iVBORw0KGgoAAAANSUhEUg[…]

To calculate the size you have to:

  1. remove the header (data:​image/​png;​base64,)
  2. remove the “=” chars used as padding
  3. multiply for 3/4

The code:

Set a dynamic configuration object in the app by reading it from the server

Set a dynamic configuration object in the app by reading it from the server


What we are going to achieve is:

  1.  Having just one place (the server!) where to set some config parameters. (Those are useful for both server and client)
  2. If later we decide to change a parameter like the size limit of file uploading, we will just change it in the server, we will not have to change the app avoiding rebuildings, and the need of resubmitting it in the stores.
  3. The app keeps the config object in the local storage to avoid extra api calls, but refreshes it every time it starts.

First of all in the server I have a config file like:

I set AppConfig just with the values I want to share with the client app (I don’t want to share the whole configuration)

Add a route in koa like:

config_ctl looks like:

When I call my endpoint I get a Json string like:

Perfect, let’s move on the app.

First of all I create a new provider by using ionic-cli:

let’s edit /src/providers/config.ts

 

Things to notice:

  • Storage is a confortable interface to the SQLite db built-in all moder browsers (it has fallback, check http://ionicframework.com/docs/storage/)
  • I created a service to interact with my api, but you can use http directly.
  • I use async/await, no worries it is just like a Promise.

That the first time the service is used, the api call result is saved in the storage, all the next calls are resolved internally by reading the local storage and no further calls are performed.

The last thing we need to do is to refresh the storage when the app restarts.

we just insert in /src/app/app.component.ts

Now we can inject the service where we need to have the config parameters available.

For instance, In a custom validator of mine, I used the config service in this way:

That’s all!

JAVASCRIPT: Validating an alpha input field in an internation/multilangual project

JAVASCRIPT: Validating an alpha input field in an internation/multilangual project


Validating an alpha input field in an internation/multilangual project, is not easy as it seems.

Javascript does not support unicode out of the box.
Regex like /^[A-Za-z]$/ would never work with strings like 愚蠢的人讀了 or успокойсяЯпростопошутил

At the beginning I used something like:

It works, but everybody knows how important is to keep the code highly readable and as short as possible.
Languages like PHP have p{L} as equivalent of the previous poem, what about JS?

FINAL SOLUTION
I found a beautiful lib : https://github.com/slevithan/xregexp

We can simply use it like;
let myRegexp = XRegExp(‘^\\pL+$’);

This compiles in a standard js regex, plus the lib has a lot of really useful things, check it out.

 

Angular *ngfor: How to interate over an object

Angular *ngfor: How to interate over an object


Let’s suppose we receive from an api an object like:

*ngfor does not handle it out of the box, yet.
(I’ve seen some proposal on github)

The solution is to use a pipe.

If you use ionic-cli

Template

Controller
//nothing special here

Module

Pipe


 

Done 🙂