[Part 2]Introduction to Angular

4 min readMay 13, 2020

Hello! In previous article we learnt installation of angular on your system with the help of Node.js. In this article we are going to see some basic concepts of angular like text input, click events, binding etc.

In angular we have View and Component. In View is there is html code for user interface and component consists of code behind that.

Firstly to create a page accepting text data as a input you have to put input tag of text in app.component.html file as shown below.

Also we are taking a button next to the input text box to display the provided data.

The click event has to be binded with the component.
For that in app.component.ts file, you have initialise the variable studentName and then using ngModel directive you can the data between view and Component.

Directives are the angular code inside the HTML which changes the behaviour of html tags. In short, it extends the HTML.

Here we have used ngModel to bind ‘studentName’ value from view and component.

You have also noticed that we are talking lot about the term binding. So lets see the binding in details.

Binding:

1.One way binding:
Here binding happens only in single direction that can be either from view to component i.e. event binding or from component to view i.e. property binding.

A)Event binding:
When a view wants to send data to component that scenario is called event binding. The event that is going to bind is enclosed between circular brackets ‘( )’.
In code, click event in html is binded to function written in component file by using ‘(click)’.

B)Property binding:
When a component wants send data to view then there is property binding. Usually in this type, values are passed from component to view. The property that is going to bind is enclosed between square brackets ‘[ ]’.

2.Two way binding:
When the data flows from both view to component and component to view simultaneously. It is the combination of event binding and property binding. As this is the combination of both, it is enclosed between square and circular brackets like ‘[ ( ) ]’ syntax.
For example, in the code, ngModel is two way binded. It acts as a two way bridge between html code and component.

Now lets try to run the code to see what happens and what output we will get.

As shown in the image, while trying to run the code we get the error. It says that it cannot recognise the ngModel as a known property for input operation and cannot bind it.

This error pops out because the module required to run ‘ngModel; is not available in the app.module.ts file. So to make this this work properly we have to add the FormsModule in app.module file. To do that we have to import it from ‘@angular/forms as it contains FormsModule.