Recent Blog Posts by Ben Nadel
Thinking About Select Menu Components, Option Lists, One-Way Data Flow, And Angular 2
As I've been digging into Angular 2, I've been trying to build a custom HTML select menu, much like the one I built in AngularJS 1.x . This has proved to be quite a challenging task. Not only because the DOM (Document Object Model) is more heavily abstracted in Angular 2 but, also because the flow... read more »
Converting A Subject To An Observable Using RxJS In Angular 2
In Angular 2, you can use the Rx.Subject class to create the source of an observable sequence . But, you never want to return an Rx.Subject instance to the calling context. Doing so would be somewhat akin to returning a Deferred object rather than a promise; and, it would leave the Subject open to... read more »
Creating Specialized HTTP Clients In Angular 2 Beta 8
When I first started digging into Angular 2's Http client, I felt that a lot of the great Angular 1.x features were sorely missing. Features like automatic JSON (JavaScript Object Notation) parsing , request / response interceptors , and XSRF (Cross-Site Request Forgery) protection , to name a f... read more »
Experimenting With The .catch() Operator And Stream Continuation In RxJS And Angular 2
Earlier this week, when I was experimenting with the RxJS Subject class in Angular 2 (in lieu of EventEmitter) , I realized that my observable sequence had a problem: if it ever encountered an error, it would stop working, even if I was catching errors. But, since I happend to be working with cli... read more »
Ward Bell: Do Not Expect EventEmitter To Be Observable In Angular 2
Last week, I blogged about how the EventEmitter class, in Angular 2, extends the RxJS Subject class and, therefore, the RxJS Observer and Observable classes as well. With this realization, I then demonstrated that you could use the EventEmitter to coordinate error logging to the server . In the ... read more »
Creating A "Run Block" In AngularJS 2 Beta 8
Sometimes, in an AngularJS application, you have a service that needs to be instantiated but isn't actually used by any particular Component . Due of the lazy nature of the dependency-injection mechanism in AngularJS, such a service would never be instantiated. In AngularJS 1.x, in these edge-case... read more »
Providing Default Values For The Safe Navigation Operator In Angular 2 Beta 8
Prologue : Angular 2 calls the "?." operator the "Elvis Operator". However, this is inconsistent with other programming languages. Historically, "?." is known as the " safe navigation operator ". The " Elvis operator " is normally a binary operator that has more to do with providing default values... read more »
How Injection Method Affects ViewChild Queries In Angular 2 Beta 8
In my earlier post about constructor and property injection for Queries in Angular 2 Beta 8 , I mentioned that I was getting some inconsistent results in my query configuration. After a little more trial and error (and some subsequent philosophical reflection), I realized that my inconsistent resu... read more »
Constructor vs. Property QueryList Injection In Angular 2 Beta 8
Yesterday, as I was trying desperately to wrap my head around the mysteries of change detection in Angular 2 Beta 8 , I noticed something interesting in the documentation: queries against the rendered view could be injected into a component through two different means. One way is to define the que... read more »
I Have A Fundamental Misunderstanding Of Change Detection In Angular 2 Beta 8
Learning Angular 2 is, without a doubt, an uphill battle. Thankfully, most of the rock scrambles result in beautiful scenic overlooks. But, the one peak that I have yet to climb is the concept of change detection. For weeks, I have been baffled by errors in change detection using ngModel . But, at... read more »
Logging Error Streams To The Server In Angular 2 Beta 6
Earlier this week, I realized that the EventEmitter class in Angular 2 Beta 6 was a sub-class of the RxJS Subject class ; which, in turn, implements both the RxJS Observer and Observable interfaces. I was excited to learn about this; but, at the time, I didn't have a solid use-case for it. As I st... read more »
EventEmitter Is An RxJS Observable Stream In Angular 2 Beta 6
Yesterday, as I was looking through the Angular 2 Beta 6 source code, I noticed that the EventEmitter class - which powers component and directive outputs - extends the RxJS Subject class. Subject then, in turn, extends both the RxJS Observer and Observable classes. This means that the EventEmitt... read more »
Unhandled Errors In RxJS Observable Streams Will Throw Errors In Angular 2 Beta 6
One of the most often cited problems with Promises is that if you don't explicitly handle an error condition in a Promise chain , it's easy to accidentally swallow said error, hiding it from both process and logging. RxJS Observable streams, on the other hand, seem to take a completely different a... read more »
Understanding The Role Of Static Methods In An Angular 2 Dependency-Injection Context
In the Angular 2 dependency-injection (DI) framework, Angular maps tokens onto singleton instances of JavaScript "classes." This allows us to swap in and out various implementations of a class so long as all of the other classes agree on which DI token is needed to reference the abstract implemen... read more »
HTTP Requests Are Cold / Lazy Streams In Angular 2 Beta 6
Yesterday, I watched a great video on RxJS streams titled, " Everything is a Stream " by Rob Wormald . In the video, Rob casually mentioned that, since HTTP requests in Angular 2 are now RxJS observable streams , the underlying AJAX (Asynchronous JavaScript and XML) request won't be opened until ... read more »
Providing Custom View Templates For Components In Angular 2 Beta 6
This morning, I read a rather interesting post by Michael Bromley on providing components with custom templates in Angular 2 . In his approach, he used the "*" micro syntax to inject and then stamp-out a view in much the same way the *ngFor directive works. His way got the job done; but, it inspir... read more »
ColdFusion Can Safely Pull-Through NULL Values In Function Return Statements
One of the most frustrating parts of ColdFusion is that it doesn't really have a solid construct for NULL or undefined values. When you store a NULL value into a variable or an object property, ColdFusion destroys that variables or object property . ColdFusion 9 introduced the isNull() operator ;... read more »
Unwrapping HTTP Responses Using RxJS Observables In Angular 2 Beta 6
Now that Angular 2 has ditched Promises in favor of RxJS Observable streams, I've been actively trying to translate my Promise-based mental model into a Stream-based mental model. And, one of the things that I always did with Promises, in an AJAX-based application, was "unwrap" the HTTP payloads so... read more »
Strange arrayContains() Behavior In For-Loop In ColdFusion 10
Yesterday, I wrote some code that used arrayContains(). Now, I don't use the arrayContains() or the arrayFind() ColdFusion methods very often. To be honest, it just doesn't come up as a use-case that often. And, when it does, I tend to shy away from these functions because I've seen them go "wro... read more »
Canceling RxJS Observables With ngOnDestroy In Angular 2 Beta 6
I happen to love Promises. Like anything else, they can be complicated at first. But, once you understand the core promise chain concepts , they can be quite enjoyable to reason about . That said, a sore point for Promises has always been their lack of cancelability . This leads to some interest... read more »
RxJS Streams Are Inconsistently Asynchronous In Angular 2 Beta 6
Now that I'm starting to dig into the RxJS Observable sequences in Angular 2, I'm trying to translate my Promise-based mental model into a Streams-based mental model. And, as I was trying to figure out how to throw errors in the future using RxJS , I noticed a behavior in RxJS streams that is fund... read more »
Throwing Errors In The Future Using RxJS In Angular 2 Beta 6
It's been over a month since I started digging into Angular 2, and I'm only just now starting to play around with data-access layers. Before I started making HTTP requests to a server, however, I wanted to start by returning static data behind simulated network latency . Normally, I could do this... read more »
Exploring Dependency-Injection Tokens Using Pictures In Angular 2
The other week, I carried out a fun little exploration in using class delegates or class proxies in the dependency-injection mechanism in Angular 2 . While I don't think this will be a terribly common use-case, the exploration really forces you to think about how dependency-injection tokens work a... read more »
Directive Conflict When Classes Export The Same Name In Angular 2 Beta 6
The other day, when I was exploring the mixed-depth behavior of provider and directive arrays , I ran into a rather strange problem. When I created a number of test directives in a loop, only the last one was actually being applied to the consuming context. Eventually, I narrowed it down to the fa... read more »
Creating Custom DOM And Host Event Bindings In Angular 2 Beta 6
Yesterday, I demonstrated that attribute directive selectors and output events can have the same name in Angular 2 Beta 6 . This is great for adding custom behavior to a view element, which I demonstrated with a "clickOutside" directive. But, this got me thinking - how could I add such a directive... read more »
Selectors And Outputs Can Have The Same Name In Angular 2 Beta 6
A few weeks ago, I demonstrated that selectors and outputs could not have the same name in Angular 2 Beta 1 . Today, I am very excited to demonstrate that this has been fixed in Angular 2 Beta 6. Now, a directive selector can also act as an output event binding. This makes it much easier to create... read more »
Provider And Directive Arrays Can Be Mixed-Depth In Angular 2 Beta 6
Back when I was experimenting with creating an Angular 1.x inspired link function in Angular 2 , I demonstrated that you could seamlessly swap one directive reference with an array of directive references. This is a pattern - arrays within arrays - that I have seen in many places throughout the An... read more »
Dependency-Injection With Sub-Classed Services In Angular 2 Beta 3
Yesterday, I was experimenting with the use of class delegates and class proxies in Angular 2 Beta 3 . The example that I happened to be using could have also been implemented using prototypal inheritance. Which, is an interesting topic on its own, especially in the context of a dependency-injecti... read more »
Experimenting With Class Delegates And Factories In Angular 2 Beta 3
With AngularJS 1.x, we had dependency-injection (DI). In Angular 2, we also have dependency-injection; but, it's really a whole new beast with parent-child injectors, token-based class association, multi-resolutions, and no application life-cycle hooks. And, since the concept of "Angular" is being ... read more »
Understanding "Object Identity" With ngFor Loops In Angular 2 Beta 3
According to the ngFor documentation, "Angular uses object identity to track insertions and deletions within the iterator and reproduce those changes in the DOM." Call me naive, but I didn't understand what the Angular 2 documentation meant by "object identity." In AngularJS 1.x, I used to use "tr... read more »
