Animations in Angular 2

One of the most challenging tasks for any UI developer is related to animations. Getting animations to where they need to be with smooth transitions and pixel perfect UI is a tedious task. When Angular developers said ‘Controllers should not access DOM elements directly..!’ all hell broke loose for UI developers!

Not to worry really, Angular2 always comes up with cool stuff to make things easier. Introducing Angular 2 Animations..!

Similar to how templates work hand-in-hand with the component it is associated with, animations follow the same pattern too. I will show a simple working example by creating a  side navigation that will leave and enter the screen from the right using Angular animations and will link a plunker

( https://plnkr.co/edit/YiPBicvjELvTeBy1NMZT?p=preview )along so that you guys can play around and get a feel of it.

First of all, we need to create a component and hook up a template to it. I am not going to dive deep into how to create an Angular component or to set up the project ( you can take a look at the plunker for the same), so here is the sample component needed to get us started.

Now that the markup is complete it is time to move on to the exciting bit, i.e., adding the animation. To make use of the /Angular animation, we first need to import state, trigger, transition and animate from the Angular core.

Our navigation menu is at the right end of the screen and the default state of it is hidden. When the menu button is clicked, the menu slides out and becomes visible. There is no need to use *ngIf to hide the menu as we are going to be move the menu off the screen using transform: translate to set the x to 100%. On toggle the navigation will slide back in by resetting the transform to zero.

Angular animations are declared inside the component’s metadata and then applied to the HTML element using the @ decorator.

We can see below that the name of the animation here is ‘toggleMenu’ and it is going to be triggered when an HTML element is attached with the same along with the @ decorator. There are two states opened and closed. In the closed state, as mentioned above we have the translate set to 100% to move it off the screen. In the opened state the translate is set to zero to bring it into the view.

Also transitions are specified so that the animation is smooth when the state goes from opened to closed or vice verse.

Next we need to declare a variable menuState that is going to hold the state of the animation, either ‘opened’ or ‘closed’. The default value of menuState is closed. The state of the animation is going to be toggled by using the toggleMenu() method which is bound to the click event of the menu icon.

The last step would to add the animation to the menu in our HTML using the @decorator within square brackets and give the name of the animation and assign the variable which is going to hold the state when toggled.

The complete file would like like this:

That’s it! It is that simple to add animations in Angular 2. Angular does all the hard work of managing the animations. Previously we could use the @Component decorator to manage the components template and styles which now includes the animations as well.

How TypeScript Can Make a Significant Improvement to Code Quality

TypeScript is a super-set of JavaScript that transpiles/compiles into JavaScript. After reading this blog you will be with me when I say that Typescript is a big deal. The simple reason is that TypeScript does not try to invent something new but just takes the same old JavaScript and adds a few cool features. You are basically not learning something new, but just getting acquainted with a few extra concepts.

Typescript can significantly improve the code quality by helping developers to code in a very efficient way which would reduce a lot of time working around unpredictable errors and typos.

So, how can typescript improve your code quality significantly? Here’s how!

The Types..!

In TypeScript every variable you declare must be assigned a type. There are old types such as string, number and array; but a few interesting ones have been introduced such as any, tuple, union and enums. They are of huge advantage and help to catch errors before it is too late.

JavaScript as we all know makes it harder to find errors in your code until you run in. Developers are always prone to making mistakes while coding but the trick is to avoid it and catch errors and typos in the early stages before the code is shipped. In this context Typescript has a huge advantage where it tells the developer that there is something wrong during the compile time itself.

Imagine a scenario of calling the .toUpperCase() on a number. Typically, you will only be notified of this error during run-time; but in typescript your code is checked for accuracy before it runs. You will get a compilation type error stating that a number cannot have toUpperCase() method.

Type Inference

This is all about the types in TypeScript. If by chance you miss mentioning the type while declaring a variable, TypeScript will automatically try to infer the type for that variable. For example, a variable declared without a type but assigned a value of a number will automatically be assigned the type number. In this way if you try to do something wrong with this variable like trying to add it with string unlike JavaScript where this is allowed, TypeScript will show an error and highlight the fact that there is a problem. This can help you in saving time finding errors.

Block scoping

Unlike JavaScript var which is used to declare a variable, Typescript introduces something called as let. let is block scoped and allows one to maintain the scope of variables when and where required.

Consider the below example where two ‘for’ loops are nested. What happens here is, since let is used to declare the variables, the i in the inside for loop has different scope than the i on the outer for loop. But if var was used instead of let, the i in the inner loop would have gotten overwritten by the value of outer loop i and the result would be something very different and unforeseen.

Classes

Most people who are familiar with Object Oriented Programming would be familiar with the concept of classes. Classes come in handy when you would want to create multiple instances of the class and make use of inheritance. To be clear, it is not that you cannot make use of the classes’ concept in JavaScript using a few tricks, but it is way easier in TypeScript.

Classes have properties, constructors and methods. One interesting fact to be noted here is that when the code is transpiled to JavaScript, the methods in the classes are created making use of the prototype. This is because the prototype can save memory as it exists only once while creating the function.

 Image: TypeScript code on the left and its transpiled JavaScript code on the right

Where there are classes, there is Inheritance. Inheritance is where public properties and methods of parent class are allowed access by child classes which inherit the parent.

Interfaces

This is one of the most interesting features of TypeScript. Interfaces are used in TypeScript to define complex types such as an object containing other properties.

Modules

Modules help to separate code and maintain them in files which perform a particular task. Doing so would help developers maintain reused code, keep variables out of global scope etc. Below is given an example of modules and how they can be used.

Usage of code blocks is not possible outside the modules if you have not exported them. Use the export keyword to be able to use code block outside a particular module.

Conclusion

There are a ton of new features in TypeScript available to make use of to be able to write less tiring and efficient code. Introduction of new features has made Typescript more flexible and helpful. Few of the features were discussed in brief in this blog. Now it is your turn to go explore TypeScript.

One more important fact to be noted: TypeScript is recommended if you want to work with Angular2!