angular 4 two way data binding sample

Here I showing how you can bind data using Angular 4. This is very simple can be done within no time.
Let see how we can do that.
Hope you have to install angular in your system if you need help installing/configuring Angular you can refer to my blog “Here“.
Now to start with, First open the command prompt and navigate to the directory where your want to start with and create a new Angular project as below:

 > ng new twoWayBinding

Above command create a project with “twoWayBinding” in directory space. it will take sever minutes to complete.
Once it is completed you get a message like “Project ‘twoWayBinding’ successfully created.”.
Now change directory to “twoWayBinding” folder and type below command to initiate the project:

 > ng serve

you will get message like “webpack: Compiled successfully.”
Now open the browser and hit the url “http://localhost:4200/” you can see the welcome page from angular.

Now you have to make changes in your “app.modules.ts” and “app.component.html” files located in “twoWayBinding\src\app”.
1. Update “app.modules.ts” file as below:
Add forms module at the top like below:

import { FormsModule } from '@angular/forms';

And add “FormsModule” in imports inside “@NgModule”.
2. Update your HTML as below:
Open “app.component.html” file and add below code:

< input [(ngModel)]=”username”>
<div>two – way binding Example: {{username}}</div>
Now open the url “http://localhost:4200/” browser and start typing in text box, it wil reflact immediately on div.
Hope it will help someone!!!!

  Comments or questions are welcome  

Angular 4 how to install on windows system

To configure your system to create Angular 4 application you need to install few dependecies as:

1) Node.js : Is an open source server framework;
2) Angular CLI : Command line interface for Angular. Which make our life easier

You can install Node using official site : Download Node
Download windows version and install it. To confirm just go to command prompt and type as below your get the version of node.

Now to install angual type below command:

> npm install -g @angular/cli

It will take several time to install and configure.
Once it is done type below command:

 > ng --version --verbose

Adding “–verbose” will give you additional information. if you want basic information only then you can type like

//both are same  
>ng --version 
>ng -v   
  Comments or questions are welcome