Angular2 Animations, Custom Directives, And More


This demo resulted from two questions that I hope to answer in the context of a single example. The first question was how to choreograph two different animations on two separate DOM elements using only the the A2 animation DSL. Specifically, the person wanted to fade-in a group of menu items and then only display another part of the UI when that animation finished. The fade-in was to begin as soon as the application loaded. That part, of course, can be taken directly from an example in the Angular 2 Animations documentation. The DSL does not provide direct input for a ‘finished’ handler, but the specified choreography could be achieved using a second animation with keyframes. For anything really custom, I would move directly to Renderer.animate().

The second question was how to assign a ‘click’ or other handler to only one list element in a group based on a property such as ‘id’. The list items are generated in a *ngFor loop. My personal preference is to keep templates and components clean, and thus potentially more reusable. If something highly specific must be done, then I attempt to accomplish that task with a custom Directive. That is the approach illustrated in this demo.

In addition, I wanted an excuse to demonstrate a couple other platform features such as how to define a Component template in an external string. This preserves separation of Component code and template while avoiding overhead associated with fetching an external html file.

The demo also illustrates usage of an injected Renderer instance … and, it boots the app using NgModule.

I won’t spend much time on internals of the demo since you probably want to go right to the code.

Well, here is is.  Enjoy!

Comments are closed.