Router Events in Angular

Mike BerrymanWhen working with Angular Routing, it’s very useful to be able to respond to routing events – the most obvious and useful being when the route changes. In AngularJS this was accomplished with by attaching a callback function to one the “$routeChange” events on the $scope. In Angular the concept is similar but has some key (and in my opinion, useful) differences.

Once you have a reference to the Router for your application you can subscribe to its “events” observable. This observable will emit a route-event whenever applicable that you can listen for. Being an observable you can subscribe to it in multiple places, filter for the specific event you want, transform the raw event, or anything else you could do with an observable.

Continue reading “Router Events in Angular”

Custom Validators for Angular 4

Rick HerrmannOn a recent Angular 4 project I had the need to use some custom form validations.  Out of the box, Angular 4 contains validators for required, email, pattern, and min/max length, and it is possible to write your own validators as well.  In particular, the custom validation I needed to do was verify that two fields were equal.  For example, a form where the user enters a phone number, and then confirms the phone number in a second form field.  The custom validation would verify that the two text inputs had the same value.

Continue reading “Custom Validators for Angular 4”

Angular Form Errors – A Declarative Solution

Rick HerrmannMost of Angular is different than Angular 1.x, but one of the idioms that stayed the same was the use of class names to identify form fields that had validation errors (e.g. ng-invalid, ng-dirty, ng-touched etc).  By checking for different combinations of these classes, you can tell which fields are invalid, have been modified (“ng-dirty”), and had focus at some point (“ng-touched”).  However, this had a tendency to lead to some rather verbose and messy view code just to show/hide a validation message:

Continue reading “Angular Form Errors – A Declarative Solution”

Angular 4 Released

Rick HerrmannLast week, Google released the newest version of their Angular framework, Angular 4.0. The biggest changes seem to be around creating smaller builds and faster code. Our Solutions Group has several Angular 2 applications in production that we have already upgraded to Angular 4, and I am happy to report that the upgrade was smooth in each case.

If you are wondering if upgrading to Angular 4 is a good idea, I have put together a list of potential questions to help you decide.

Continue reading “Angular 4 Released”