Angular
Angular2: Beyond the “Todo” list!
· ☕ 6 min read · 🤖 Naresh Mehta

Angular2 is the latest buzz word in web programming and frankly speaking, I am in love with it. It seems to be the “Docker” for web! Well I am also in love with “Docker” and the good part is that both Angular2 and Docker do not mind me loving them at the same time ;). Jokes apart, I particularly like Angular2 because of the component concept and its inherent support for TypeScript (TS). Components truly allow for creation of re-usable web components since they also encapsulate the “view” aspect. Hence no more grappling / switching between a model/view/controller. Everything is inside a component. You use the component and you get an automatic binding with the needed controller and view. This takes re-usability to the next level. Also for someone like me whose background is systems programming, components can be seen as class object exposing certain methods/properties (i.e. basic encapsulation). Components also allows for extension (i.e. inheritance) and can be tested individually, so once confirmed working, they are always working without any external dependency. That said, there are quite a few tutorials out there which creates a basic ToDo app with Angular2 and yes, it is pretty cool. But when you try to make something useful out of what has been learned from the ToDo App, the details bog us down. In any case, #FreeCodeCamp (#FCC) project on Pomodoro Clock was my trigger to use Angular2. I have the project hosted on Plunker (Pomodoro Clock) which uses Angular2, TS and Semantic-UI. I am also a big fan of Jade so have used it a little bit in the index.html but using it inside a component template seems to be a bit awkward. Though we can do so, I have used normal HTML since the components are broken down and are quite simple. Pomodoro clock is basically a countdown timer which alternates between a session time and break time and increases productivity (Google it if you want to know more).