Tag: angular

Intercepting the value change of an @input()

Intercepting the value change of an @input()

I am working on a component that handles pictures upload, for various reasons, the real upload happens externally.
It’s possibile to integrate it in a form or pass to it a callback that is fired after the files are selected.
When I use it within a form, I have another component for showing a progressbar, when I pass to it a callback, I use the embedded progressbar.

The embedded progressbar, needs to know the percentage of the upload, I pass it throught an @input(), when it reaches 100 I want to make the progressbar desappear and get my icon back.

So how to intercept the value?

Well, we have two methods:

1) ngOnChanges

2) set,get

 

An angular and ionic component for google places autocomplete

An angular and ionic component for google places autocomplete

Many applications need an input for inserting a city or an address.
It is not always a good idea to implement the whole logic in the controller, first of all because we can’t control so well the ngModel and secondly because we could need to use that component in different parts of the application.

I implemented this component on top of some ionic components, but it is very easy to replace the ion-label and ion-input and reuse the same code for a “vanilla” angular project.

What will get in the end of this tutorial, it is a component we can easily integrate in our forms in this way:

types restricts the results that appear in the autocomplete field (see maps api)
returnProperty is the property that we want into the ngModel, in this case just the place_id, by default you”ll get the whole gmaps object

Let’s start with the template:

Nothing special here.
We have the {{label}} passed from the external. #addressInput is needed to find the real <input> tag underneath the ion-input component, of course, the ngModel and a spinner that shows if IsPending is true (while the form is being validate)

Before to see the code of the controller which is the heart of this component, it’s important for you to have an overview of  how forms work in angular and what ControlValueAccessor is.
If you don’t know about it, I strongly advice you to read some good article like this one: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Our component relies on https://angular-maps.com/ (@agm/core) in order to easily interact with google maps, I use it for other stuff in my app, so I’ve decided to use it even here.
In this case it helps to dynamically load the maps api:

Install it before to continue and set up your google api key in your app.module.ts

Finally, the controller (pay attention to the comments):

That’s all.
The thing I’d like to improve is

It is never advisable to directly interact with the dom, we could have problem if we export the app for other platforms not web-based.
I’ll find and post a better solution, probably based on “rederer” .
Do you have any suggestion?

UPDATE

The funcion  validate() is called every time the model changes, so many subscriptions occurres.
The easist, but probably not the best way to avoid it is:


It would be better to find a different way to access to FormControl object, someone pass it to the component through @input()
I’ll give you updates as soon as I find a better way, in the meanwhile any advice is encouraged.

Angular: how to add a progress bar to show during a file upload

Angular: how to add a progress bar to show during a file upload

The vanilla  XMLHttpRequest() method implements the”progress” event  and it is pretty easy to use.
In angularJS (angular 1) we had to wait till the 1.5.something to have this method supported.
In angular (angular 2 which I am talking about) there is no support yet.

The easiest way to get this feature, is to use this good lib:
https://github.com/DarkXaHTeP/angular-progress-http

You can find all the instructions in the github page, the lib is updated and tested with the latest angular version.

Once you’ve got the progress percentage in your controller, you can easily implement a graphical progress bar with few lines of html and css,
An useful guide for ionic2, but it is a good input for any other implementation.
https://www.joshmorony.com/build-a-simple-progress-bar-component-in-ionic-2/

ionic2: how to automatically redirect to the login page

ionic2: how to automatically redirect to the login page

I got a point where it was important to implement an automatic redirection to the login page when the user tries to access a page that should be accessed from logged users only.

I needed something easy to add on every “reserved” page.
The first attempt was to create a service, I immediately faced with a problem:
The NavController (needed for the page change) can’t work form inside a service.

This is the error I got:
No provider for NavController

https://github.com/driftyco/ionic/issues/9581

I decided for a component.
The working principle is easy:

  1. When the app starts deletes the storage obj “user”
  2. Immediately after it tries to get a new obj from an api call by using the access token stored in the storage obj “session”
  3. If the call succeeds it saves the new storage obj “user”
  4. Every page that needs to be “protected” includes the component <login-redirect>
  5. <login-redirect> checks if the storage obj “user” exists, if it does not, it redirects to the login page passing a parameter used from the login component to redirect to a page(or back) if the login succeeds
  6. When the login succeeds, the login component calls the api again to fetch and set the storage obj “user”
  7. The login page redirects to the right page (passed as parameter on the point 5)

Let’s see some code:

I don’t need to modify the template or the scss file.

controller

The @Input() is used to read from the tag’s attribute “redirect” the page to pass to the login component (we’ll see it later)

The login component has some logic like this

In every page I want to reserve for logged users, I add this line in the template


This method works fine, anyway I don’t know yet if this is the best method to achieve the result, for example a little side effect is that the page we want to protect appears for a short time before the redirection.
As soon as I discover a better method I’ll share it.

Any suggestion?

ionic storage and objects: how to add a property

ionic storage and objects: how to add a property

Ionic has a really useful module to locally store the data that the app wants to save.
I use it for many things, for example to save the auth token the user receives after the login.
It is a very simple layer that automatically chooses the best available store engine in the browser.
If you want to go deeper http://ionicframework.com/docs/storage/

The usage is super easy :

The problem is when you come to deal with objects.
The api is not capable to add or remove a property, you have to replace the whole object.

For me this is extremely annoying, plus if you do it often you get your code quite “dirty”.
I decided to write a little provider that by saving a json string, allows me to add a single property to the object.

$ ionic g provider MtfStorage

To use it, you just have to import the provider in the component you like


 

How to define the right scope context (this) while passing a callback function to a component

How to define the right scope context (this) while passing a callback function to a component


A super common situation is to pass a callback function to component.

Template

 

Controller

 

The component takes the callback in input

In this scenario the method this.apicall(value) would fail since “this” is not what we expect.
To be sure that “this” refers to the controller’s scope, we can add a simple line on its constructor:

 

Solution


 

Angular: Manually update a model from inside its custom validator avoiding loops

Angular: Manually update a model from inside its custom validator avoiding loops


I know, it could sound weird, in another post I will give more details about this need of mine.

Now I want to focus on the problem:
If you update a model inside its own custom validator, it will trigger the validator again in a devastaing loop.
I was looking for a way to update the model without to trigger the validator, so I played with the parameters of the two methods setValue and patchValue, but it did not work.

In the end, I decided to:

  1. validator to null
  2. update the value
  3. set the validator again.

It works well.

Does someone know a better way to achieve the result?

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!

 

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!