- Creating Web Components in Angular - February 23, 2021
- What is your Communication Style? - August 1, 2020
- Sharing is caring? - January 28, 2020
This is part 3 of the Angular Tutorial for Beginners series. A printable version of this article can be found here.
Part 1 of this series discussed how to get started with Angular.
Part 2 discussed about the basic tenets of Angular Modules, Components and Directives.
Part 3 further builds up on the demo code written in earlier parts, so it is strongly advised that you go through them before proceeding.
Data Binding in Angular
There are four types of data binding in Angular:
Interpolation
We have already used interpolation in our code, when we displayed the employee fields in our table.
It is denoted as {{value}} and is used to pass value from the component to the DOM.
Property Binding
We used property binding in our code, when we binded the property of the NgStyle element property to values from our component.ts file.
In property binding, element html property values in DOM are set from the component.
Event Binding
The above two types are used to pass value from the component to the DOM. Event binding is used to pass value from the DOM to the component.
Lets have a look at it in the code.
We will add a button in our html code as follows:
<button (click)="onClickInformation()">Information</button>
{{information}}On button click we are calling a function onClickInformation(). This function is defined in the component file.
Lets define this function in the component file.
information = '';
onClickInformation() { this.information = 'This is a list of employees'; } Here through event binding we are calling the onClickInformation in the component. Initially the value of the ‘information’ variable is set to empty. On click of the button, some value is set in it. This value is then displayed in DOM through interpolation.
So, on button click, we can see the following in the browser.
Two way data binding
As the name suggests, this provides binding from component to DOM and vice versa. Lets see this in action. Two way data binding uses ngModel.
Type in the following piece of code into your html file:
The name property is defined in the component as follows:
name:string
To ngModel directive that we just used, is present in the formsModule. So we need to import it in our app.module.ts file as below:
Lets go to our browser and see what happens:
You will find that whatever you write in the textbox is reflected next to it.
So here we have a string property ‘name’ that is defined in the component file. It’s value is set in the DOM equal to the value in the textbox. So value is passed from DOM to component. At the same time its value is passed back from component to DOM through interpolation and you can see it next to it. So the value in the view and the model is same at all times. This is two way binding.
It is denoted as [()] notation which is also known as banana in a box notation.
This concludes this article on data binding. For more information the official Angular website is a good place to explore.
In the next part of the Angular Tutorial for Beginners series we continue to understand interfaces in Angular.
A printable version of this article can be found here.
Contents of the Angular Tutorial for Beginners series:
Part 2: Modules, Components & Directives in Angular.
Part 3: Data binding in angular.
Part 6: Http Requests with Observables.
Part 8 :Nesting Components in Angular
