Tuesday, April 25, 2017

Using FormBuilder, Validators & FormGroup in Angular 2 to post data to Node server (node.js)

This blog explains usage of FormBuilder, Validators, FormGroup classes in Angular 2 projects. In this post we will create HTML form and use Angular 2 classes to validate and post the data to Node server.

Consider this app to be broken down in to two parts. First part is the Angular 2 part which consist of user form and other front end communication things. Second part is the Node.js server which will receive the data from the Angular 2 form. Lets begin with first part consisting of user form and communication service using Angular 2.

Setting up the project and Angular environment can be done referring to my previous blog on Angular 2 routing. We will be using angular-cli for this purpose. Let's begin by generating the project using command "ng new *project-name* --routing". Please refer below screen-shot for more information on success of project creation.


By default any new angular-cli blank project renders app.component. App component is the default root component for project. We will not be creating any new component for using the forms but we will modify the app.component. Every component in Angular 2 has a template which contains the view of the component. We will modify the template or view of app.component. The templates in Angular 2 by default are HTML files. We will add a form with two input fields and a submit button as shown below:

app.component.html


<div class="container formcontainer">
<h1>
  {{title}}
</h1>
<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
  <input class="form-control" type="text" name="fname" [formControl]="userform.controls['firstName']" />
  <input class="form-control" type="text" name="lname" [formControl]="userform.controls['lastName']" />
  <div style="margin-bottom: 1em">
    <button type="submit" [disabled]="!userform.valid" class="btn btn-success">Send Data</button>
  </div>
</form>
</div>

If we refer the above form, we can see few attributes from Angular 2 have been added to validate the form and submit it. FormGroup is used to define forms in Angular, along with FormControl. The user should be able to submit this form after filling it in. The Submit button at the bottom of the form does nothing on its own, but it will trigger a form submit because of its type (type="submit").

To submit the form data to node.js server, we will need  Angular 2 service which will be used for connecting to the node server. Services are JavaScript functions that are responsible for doing a specific task only. Angular services are injected using Dependency Injection mechanism and include the value, function or feature which is required by the application.

We can create service using angular-cli command "ng g service submitform". Once execution of this command is complete a service file is created with the name "submitform.service.ts". We will use HTTP protocol for server communication.


submitform.service.ts


import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class SubmitformService {

  constructor(private http: Http) { }

  public submitFormData(data){
    var headers = new Headers();
    let body = data;
    headers.append('Content-Type', 'application/json');
    this.http
      .post('http://localhost:3200/api/submitform', body, { headers: headers })
      .map(response => response.json())
      .subscribe(
        response => this.submitProcessComplete(response)
      )
  }

  private submitProcessComplete(serverResponse) {
    console.log("Response from serve ",serverResponse)
  }
}

Referring to above code "submitFormData(data)" is the public function which will be accessed by app.component. This function is using POST method for sending form data to node server. The parameter "data" is the information from the app.component.html form fields. Function "submitProcessComplete" is the callback function after response from node.js server is received. Once our service is ready for usage, we will need to add this service to providers list in "app.module.ts" file.

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {SubmitformService} from "./submitform.service";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [SubmitformService],
  bootstrap: [AppComponent]
})
export class AppModule { }  

Now we are ready to use submitform.service.ts file. Since our form is added in to app.component.html, we will use this service in app.component.ts file.

app.component.ts


import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators, FormGroup, FormControl} from '@angular/forms';
import {SubmitformService } from "./submitform.service"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit  {
  title = 'Reactive Forms!';
  userform: FormGroup

  constructor(public fb: FormBuilder, private submitformservice:SubmitformService){
    this.userform = fb.group({
      'firstName' :  [null, Validators.required],
      'lastName':  [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])]
    })
  }
  ngOnInit() {
  }
  private onSubmit(value:any) {
    this.submitformservice.submitFormData(value);
  }
}

Referring to the code above, we are creating here FormGroup and FormControl to manage our Angular 2 form. The validation of the form elements are done using Validators. Lets look into form tag again for more clarification, focus on yellow highlighted items.


<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
  <input class="form-control" type="text" name="fname" [formControl]="userform.controls['firstName']" />
  <input class="form-control" type="text" name="lname" [formControl]="userform.controls['lastName']" />
  <div style="margin-bottom: 1em">
    <button type="submit" [disabled]="!userform.valid" class="btn btn-success">Send Data</button>
  </div>
</form>

Now, we have everything ready from the Angular 2 side which was first part of this blog post. All the details shared above are frontend showing how Angular 2 form is added and connected to service which will be sending the data to the node.js server. If we closely look into "submitform.service.ts" file, we see how the HTTP connection is being established to the server, focus on yellow highlighted items.


public submitFormData(data){
    var headers = new Headers();
    let body = data;
    headers.append('Content-Type', 'application/json');
    this.http
      .post('http://localhost:3200/api/submitform', body, { headers: headers })
      .map(response => response.json())
      .subscribe(
        response => this.submitProcessComplete(response)
      )
  }

Referring to the code above, the HTTP post method is pointing to our server route which we will be creating in the second part of this blog.

To start creating a node.js server, let us create a folder named "server". This folder will contain all our node.js server code and dependencies. To initialize a node.js project navigate to the server folder and run the command "npm init". After this we will install few dependencies depending upon our requirements. In case of this post, we will need "express" and "body-parser" dependencies. We can install each of these dependencies by running the command "npm install *dependency-name* --save".



Once our node.js project is configured and ready, we proceed to the main entry point for our node.js app/server which is "index.js". The name of this JavaScript file is not fixed and can be changed at the time of project initialization. We will be adding our code to index.js file so that it listens to a port to which Angular 2 form would be sending the data to. Also, the data send and received between these two apps (Angular 2 and node.js) will be in JSON format.

index.js


// call the packages we need
var express     = require('express');
var bodyParser  = require('body-parser');
var app         = express();
var fs       = require('fs');
var path      = require('path');
var http   = require('http');

app.use(function(req, res, next){
  res.setHeader('Content-Type', 'application/json')
  // Domain you wish to allow
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  // Set to true if you need the website to include cookies in  requests
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  // Check if preflight request
  if (req.method === 'options') {
    res.status(200);
    res.end();
  }else {
    // Pass to next layer of middleware
    next();
  }
});

// configure body parser
app.set('port', process.env.PORT || 3200);
app.use(express.logger('dev'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use("/api", app.router);
app.use(express.static(path.join(__dirname, 'public')));

// dynamically include routes (Controller)
fs.readdirSync('./app/controllers').forEach(function (file) {
  if(file.substr(-3) == '.js') {
    route = require('./app/controllers/' + file);
    route.controller(app);
  }
});

http.createServer(app).listen(app.get('port'), function(){
  console.log('Server listening on port ' + app.get('port'));
});


Referring to the code above, all the yellow highlighted lines are very important to focus.

app.set('port', process.env.PORT || 3200); 

The line of code above, defines express server to listen to a port 3200.

app.use("/api", app.router);

The code above, defines router for the express server.

route = require('./app/controllers/' + file);
route.controller(app);

The code above, allows all the files in 'app/controllers' folder in 'server' to act as controller. Each controller can independently define their route URLs and act on it as per requirement. For receiving data from our Angular 2 demo-form, we will be creating one controller file. Let us assume the name to be "submitform.controller.js". This controller will just act as a route to receive the HTTP POST data from Angular 2 form and send a response back to the front end.

submitform.controller.js


module.exports.controller = function(app){
 app.post("/submitform", function(req, res){
  console.log("req.body - ",req.body);
  res.json({"info":"data received on server"});
 });
}


Refer screen shot below for project structure so far.




Now we have both Angular 2 form(client) and node.js server ready for usage. We will first start our server. Navigate to the server folder and run command "node index". On successful execution we can see result as below screen shot.


Now we can run our Angular 2 app by using command "ng serve". On successful execution we can see result as below screen shot.


Once both our server and client are running, we can send the data from Angular 2 to node.js and receive a response. The complete working example can be seen in video below:

video

Download completed project file - Click here

-Nitin

Sunday, February 5, 2017

Basic routing in Angular 2.0 using Angular CLI

Angular 2 is one of the most popular JavaScript framework available today for creating web applications. It is a complete rewrite of AngularJS using Microsoft's TypeScript language (a strict superset of JavaScript).

To briefly understand Routing, consider it as the process of taking part of the URL endpoint and processing it into action.

Angular CLI is a command line interface for Angular. Both the CLI and generated project have dependencies that require Node 4 or higher, together with NPM 3 or higher.

To begin with we need to have Angular CLI installed on the workstation to start coding. To install CLI, we use command "npm install -g angular-cli". To update angular-cli to a new version, we can use below commands:

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest

To verify if angular-cli is properly installed on your computer, we can run command "ng --version". It runs and shows version of angular-cli along with node.js version as shown in image below:

Basic routing in Angular 2.0 using Angular CLI

If version of angular-cli is visible, we can proceed to creating our demo project. To create a new project we execute command "ng new *project-name*". We can also create a project by default routing module. We can use command "ng new *project-name* --routing". Please refer below screen-shot for more information on success of project creation.

Basic routing in Angular 2.0 using Angular CLI




After successful completion, we try to run and see the blank project created by angular-cli. By default any new angular-cli blank project renders app.component. App component is the default root component for project. To run the Angular2 cli project we use command "ng serve". This command executes the project to run on port 4200 by default. We can access the compiled project at the browser by navigation to http://localhost:4200.

Basic routing in Angular 2.0 using Angular CLI


Basic routing in Angular 2.0 using Angular CLI

Once we have the project files ready, we will try creating three demo route pages. Let us assume the demo route pages to be home, aboutus and contactus. Using angular-cli commands we will create these three pages.

We will first add three web-links in the app.componet.html which will be used for navigation/routing.


<h1>
  {{title}}
</h1>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#about">About Us</a></li>
  <li><a href="#contact">Contact Us</a></li>  
</ul>
<router-outlet></router-outlet>

Every component file once generated from angular-cli accompanies respective CSS file by default. We will add some CSS to format navigation bar.

app.component.css


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

Finally we will rename the default title of the app to be "Routing Demo" by modifying the app.component.ts file


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Routing Demo!';
}

Below is the output with the navigation bar.




As shown in above screen shot, we will add three components or pages using angular-cli to routing-demo project. The command for adding a component in angular-cli is "ng g component *my-new-component*" or "ng g c *my-new-component*"

Basic routing in Angular 2.0 using Angular CLI

Once we have all the three pages/components ready, we add these routes in routing module file which is "app-routing.module.ts"


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomepageComponent} from './homepage/homepage.component'
import {ContactusComponent} from './contactus/contactus.component'
import {AboutusComponent} from './aboutus/aboutus.component'

const routes: Routes = [      
   { path: '', component: HomepageComponent },
   { path: 'aboutus', component: AboutusComponent },
   { path: 'contactus', component: ContactusComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

The blank path ' ' is the root path. When the app loads, by default we want to load homepage or HomepageComponent. We will modify our template file, which is app.component.html file, so that the loaded pages show active links. It is a normal navigation requirement, in which any page we are visiting shows the active selected link.

app.component.html


<h1>
  {{title}}
</h1>
<ul>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a routerLink="">Home</a></li>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/aboutus">About Us</a></li>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"><a routerLink="/contactus">Contact Us</a></li>  
</ul>
<router-outlet></router-outlet>

'routerLinkActive' is one of the attributes when using routing, the value assigned to it is the 'active' CSS class. We can define any CSS class and assign it to 'routerLinkActive'. The other attribute is 'routerLinkActiveOptions', by default the value is {exact:false}. We are using it with assigned value to be {exact:true}. It helps in tracking the active link or navigated link. Once the link is active then respective CSS class gets added to DOM.

Basic routing in Angular 2.0 using Angular CLI


The complete working example can be seen in video below:

video


Download completed project file - Click here

-Nitin


Friday, January 27, 2017

Building the UI with GridLayout in NativeScript

NativeScript is a cross-platform mobile applications development platform using JavaScript, TypeScript or Angular. Telerik – a Progress Company (NASDAQ: PRGS), created NativeScript. NativeScript is a different technology - it is a runtime, not a web technology.

To try out this blog post, basic understanding of JavaScript, CSS, Terminal usage and any text editor knowledge will be helpful.

To begin with, we need to have NativeScript installed on the workstation to start coding. Download link to NativeScript is shared below:

NativeScript - http://docs.nativescript.org/angular/tutorial/ng-chapter-1#11-install-nativescript-and-configure-your-environment

NativeScript supports various layouts:
  1. FlexboxLayout
  2. AbsoluteLayout
  3. DockLayout
  4. GridLayout
  5. StackLayout
  6. WrapLayout

The example is this blog post explains usage of GridLayout. To start coding navigate to the terminal or command prompt. We first run the command "tns --version" to check NativeScript installation.

GridLayout in NativeScript, NativeScript version check command


If you can see version of NativeScript, we can proceed to creating our demo project. To create a new project we execute command "tns create *project-name* --ng". Please refer below screen-shot for more information on success of project creation.

NativeScript command for project creation, GridLayout in NativeScript

Once the project is created, navigate to the project folder with change directory command. We need to add platform based on the device we need to test the demo project on. The command to add platform is "tnd platform add android"

GridLayout in NativeScript, NativeScript command for adding android platform CLI

After adding the platform we are all set to add GridLayout for our UI in the demo application. Let us take a look at the  project folder structure. By default when a new project is created with NativeScript CLI, it has a basic template with "Tap the button" functionality. 

GridLayout in NativeScript


The most important folder on which we will focus now is 'app' folder. This folder contains source code of the application including all the classes, html and css. To make the demo for GridLayout, we will navigate to this folder and modify the 'app.component.html' file. Before making any changes, lets run the project once and see the output. The command for running the project is "tns run android --emulator". If android phone is connected to the development pc in debug mode then command used will be "tns run android" or "tns run android --watch". Please refer below screen shot for output.

GridLayout in NativeScript


GridLayout defines grid for the available screen area on the device. In this example, we will create 3x3 grid which means, three rows and three columns. We will try to place one icon in absolute center of the device screen. To be more precise, we will place one icon in grid (1,1). The grid system considers first row and column to be zero, so (1,1) refers to first row, first column.

Consider the code below for initializing the GridLayout.
<GridLayout columns="*, auto, *" rows="*, auto, *">

</GridLayout>

The columns attribute in the code signifies three columns as "*, auto, *". 'auto' occupies the height as much as the content is placed in this grid. "*" signifies all the remaining area will be used. As in code above we have two "*" and one "auto". So the content height will be used by "auto" and the remaining area will be used by other two "*" columns. Similarity the rows attribute has "*, auto, *" so content width will be used by middle row and remaining two rows will use the remaining area excluded by the "auto" row.

The final code for GridLayout will look something like below:

<GridLayout columns="*, auto, *" rows="*, auto, *">
    
    <Label text="Label 1" row="0" col="0" backgroundColor="white"></Label>
    <Label text="Label 2" row="0" col="1" backgroundColor="green"></Label>
    <Label text="Label 3" row="0" col="2" backgroundColor="white"></Label>
   
    <Label text="Label 4" row="1" col="0" backgroundColor="blue"></Label>  
    <Label text="Label 5" row="1" col="1" backgroundColor="orange"></Label>    
    <Label text="Label 6" row="1" col="2" backgroundColor="blue"></Label>
    
    <Label text="Label 7" row="2" col="0" backgroundColor="pink"></Label>
    <Label text="Label 8" row="2" col="1" backgroundColor="purple"></Label>
    <Label text="Label 9" row="2" col="2" backgroundColor="pink"></Label>    

</GridLayout>

When we run the above code, it rendered like below screen on emulator.

GridLayout in NativeScript

Now we have a 3x3 GridLayout. As shown in picture above "Label5" refers to the center of the device which is row-1 and column-1. We will target this grid to add one image or icon. Let us change this grid content as below:
<Image src=" https://image.flaticon.com/teams/1-freepik.jpg" row="1" col="1" stretch="none"></Image>

After adding image to  grid of row-1 and column-1, our output changes as shown in screen-shot from emulator:

GridLayout in NativeScript

As shown above, the "auto" property helps in expanding the grid to contain the graphic and remaining grid use the rest available area as denoted by "*" property of rows and columns.

The complete working example can be seen in video below:

video

Download completed project file - Click here

-Nitin



Monday, January 23, 2017

Send/receive data from Javascript to Node.js using Express

One of the most basic requirement while creating node js web applications is to send and receive data between HTML client and Nodejs server pages. This blog post shows how can we send data from HTML forms using javascript to node.js server and receive the response.

There can be multiple ways to achieve the above-mentioned task. My post explains this communication with one simple example. In this example, we have one HTML form with username and password. Once the user submits the form data, it goes to node.js server and response is send back to HTML page about the status of the user.

To begin with, we need to have node.js installed on the workstation to start coding. Download link to node.js is shared below:

Node.js - https://nodejs.org/en/

We can use open source editors like sublime, atom or visual studio code for writing our codes. Download links for them are shared below:

Atom - https://atom.io/

Sublime - https://www.sublimetext.com/3

Visual Studio Code - https://code.visualstudio.com/

Once we are done with the setup, we start by initializing our project. Navigate to command prompt and change directory to the project folder. Please refer screenshot below for node project initialize command.

Node.js command for project initialize


Once "npm init" command is executed on command prompt you will set up your project by entering all the required fields as shown below:

Node.js command for project initialize


After the execution is complete, we can see a "package.json" file which stored all the information. Also keep a note of entry point "index.js" file as shown above. The main purpose of "package.json" file is to document for what packages your project depends on. It also makes our build reproducible which means, if we share our code with other developers it is easier for them to load dependencies and run the project easily.

To use the express server, we will install it in our current project. Any dependency required in the project is installed with npm command. In this example, we will install express using "npm install express" command.

Adding express server to node.js project


As mentioned in the initialize project configuration, we can create our index.js file. 

index.js

This file acts as main launch file for the node js web application. This file would be listening to a port which will act as a server.

var express = require('express');
var app = express();
app.use(express.static('public'));

//Routes
app.use(require('./routes'));  //http://localhost:8000/    http://localhost:8000/login
var server = app.listen(8000, function () {
  var host = server.address().address
  var port = server.address().port 
  console.log("Example app listening at http:// ", host, port);
});

One very important thing apart from listening to port is "Routes" in the index.js file. We create a routes file and define the behavior of our web application navigation in this file. Lets us have a look at our routes.js file below:

routes.js

The first route defined in the below file is for the index.html file. The index.html file is main launch file which is connected or mapped to the root of the application. The second route which is "/login" route will be used as POST URL from javascript in our HTML file. As shown below, we are also having a new dependency which we need to install with the command "npm install body-parser". body-parser gives you a middleware which uses the incoming request data to await the full, raw contents of the request body before "parsing it". "body-parser" extracts the entire body portion of an incoming request stream and exposes it on req.body as something easier to interface with.

var express = require('express');
var router = express.Router();
var path = require('path');
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })


// Define the home page route
router.get('/', function(req, res) {  
  res.sendFile(path.join(__dirname +'/index.html'));
});


// Define the login route
router.post('/login',urlencodedParser, function(req, res) 
{
     if (!req.body)
     return res.sendStatus(400);  
    
     console.log("userid -> ",req.body.userid)
     console.log("password -> ",req.body.pwd)

     // we can connect and validate username and password from database
     // this project example does not include scope for database connection
     // here we will try to send static values from node.js to html and see response on client side
     var userstatus = false;

     res.setHeader('Content-Type', 'application/json')        
     res.end('{"userexist": '+userstatus+'}'); // userstatus is send to html client as response from node.js

});

module.exports = router;

The main client file which is connecting to the node.js server code is index.html. This file acts as the entry point of the application and loads a view to interact with the server.

index.html

The code below is used to render HTMLform which is sending data to the node.js code. The most important part in the code below in script tag which contains the javascript which is used for communication.

As shown, jQuery ajax call is made with POST method to connect to node route "http://localhost:8000/login" . The 'data' property is used to send the data to node.js server in JSON object format.

<!DOCTYPE html>
<html>
<head>
  <title>New Website</title>
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>


<div class = "container">
  <div class="wrapper">
    <form  method="post" name="Login_Form" class="form-signin" id="form.login" action="/login" >       
        <h3 class="form-signin-heading">Welcome ! Please Sign In</h3>
        <hr class="colorgraph"><br>
        
        <input type="text" class="form-control" name="InputUsername" id="InputUsername" placeholder="Username"  required="" autofocus="" />
        <input type="password" class="form-control" name="InputPassword" id="InputPassword" placeholder="Password"  required=""/>          
       
        <button class="btn btn-sm btn-primary btn-block"  id="SubmitBtn" value="sendData" type="button" >login</button> </br>
       
        <div id="select_link"  style="display:none ">
          <h6> You are not registered user. <a href="/signup">Click here </a> to signup.</h6>
        </div>
    </form>     
  </div>



<script type="text/javascript">
    $(document).ready(function(){
    $("#SubmitBtn").on("click",function(){
       //reading form data to send information to node.js
       var userid =$("#InputUsername").val(); 
       var pwd =$("#InputPassword").val();

       //send data as POST to node url defined in node routes
        $.ajax({
        type: 'POST', 
        url: 'http://localhost:8000/login',
        data: {"userid":userid,"pwd":pwd},        
        //success function executes once communication with node.js is complete and we receive response from node as data params
        success: function (data) {
            var receivedData = data;            
            if (receivedData.userexist == false) {
              $("#select_link").show()
            }
        },
        error: function (xhr, status, error) {
            console.log('Error: ' + error.message);
            console.log('Error connecting to the server.');
        }
        });
    });
  });
  </script>
 
</div>
</body>
</html>

The complete working example of this communication can be seen in video below:


video

Download completed project files - Click here

-Nitin



Using FormBuilder, Validators & FormGroup in Angular 2 to post data to Node server (node.js)

This blog explains usage of  FormBuilder , Validators , FormGroup classes in Angular 2 projects. In this post we will create HTML form a...