Angular 2 Basics in a Nutshell

Angular is the new upcoming front end framework for web development. Since I am experimenting with it, I will be posting three blogs on the same, Angular 2 Basics in a Nutshell, Angular 2 Advanced in a Nutshell and Angular 2 Best Practices.

A web app is basically a single or clubbed Angular Application consisting of Components. Components can be thought of as basic building blocks.

In this blog, I will focus on a simple component with example of template expansion, input and output bindings. I wouldn’t explain the installation and setup part, assuming you have done it already.

The example app component is an input field with a next button. It will have a default value and log the value user feeds into it to console.

Here is a screenshot of the component in action

With the component declaration

Here comes the functioning i.e. input and output to and from a component. The constructor starts the show, initializing variables and template expansion includes variable’s value, so the component loads with the initial value of 1000.

The user will (obviously) edit the text and hit next button. The value of attribute is logged in console.

Flow of control is explained pictorially. ‘#’ declares variables in HTML context. income_input is an ‘HTMLInputElement’ in the given example.

I will also write blogs for Angular Observables, Services, Dependency Injection… etc.