Angular Component Basics in a Nutshell

Angular is the new upcoming front end framework for web development. And anything which is new and trending attracts a lot of eyeballs, including me 😃.

An Angular app is basically a smart collection of of Components. Components can be thought of as basic building blocks in front end lingo.

In this blog, I will focus on a simple component with example of template expansion, input and output bindings. I assume the installation and setup has been done already.

Disclaimer : The target audience for this post are developers who have just started exploring or are new to front end frameworks. Or someone who is upgrading from jQuery.

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

Here is a screenshot of the component in action

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 edit the text and hit next button. The value of attribute is printed in browser’s console.

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

Typescript is the primary language in Angular. So to be productive enough in Angular development it is advisable that one should be comfortable in Typescript.

Follow me to get regular updates on Web development, and do clap if you find this interesting 👍