In this article, I will cover how to build angular 2 component using Visual Studio 2017,  I am using “Angular2VisualStudioTemplate” which is a free template and  helps us to setup a initial angular 2 project structure. The main advantage with this is we do not need to write any gulp or tsconfig.json or package.json files all these things will be created by Angular 2 Visual Studio Template

You can install this by selecting angular 2 visual studio template which appears on the right side panel when you click on online template tab while creating a new project, you can refer below screen shot

angular2-visual-studio

Once the installation is successful then go to the File -> New -> select the Angular 2 project and click on ok button to create a new angular 2 project
angular2-visual-studio-project
If you go and see the right side solution explorer then you can find app folder containing sample angular 2 component along with the necessary configurations files which are required to execute this successfully
angular2-visual-studio-project-solution-explorer
I don’t want to do any changes because I want to test this without writing single line of code, I am just going to press F5 to check the output, after pressing F5 I see below output, which means the angular 2 application is working fine
angular2-vs-reg-componentone-plain
In addition to the sample component, I am planing to create a new registration component which allows end user to enter email,password and username on click of submit button the form will post data to the mongodb using rest API
angular2-vs-reg-component
First, we need to create a registration service and the service will have registerUser method which takes user object as a parameter, the http request takes this object and post it to the server

import { Injectable } from '@angular/core';
import {HttpModule, Http,Response} from '@angular/http';
import 'rxjs/add/operator/map'
import { User } from './User'
@Injectable()
export class RegistrationServiceService {
    http: Http;
    posts_Url: string = 'http://192.169.201.194:5005/register';
    constructor(public _http: Http) {
       this.http = _http;
    }
    registerUser(user:User) {
       return this.http.post(this.posts_Url, user, {  }).map(res =>  res.json());
    }
}

The registration component will make a request to  registerUser method by passing user object as a parameter, we are using two way data binding to get the user object, when ever user enters or changes values in the input controls that will automatically available in the user object

import { Component, OnInit, Input } from '@angular/core';
import { RegistrationServiceService } from './registration-service.service';
import { User } from './User'
import { Location} from '@angular/common';
@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css'],
  providers: [RegistrationServiceService],
  moduleId: module.id
})
export class RegistrationComponent implements OnInit {
  constructor(private _registrationService: RegistrationServiceService) { }
  @Input() user: User;
  responseStatus:Object= [];
  status:boolean ;
  public location = '' ;
  ngOnInit() {
    this.user = new User();
    this.user.displayName = "keysandstrokes";
    this.user.email = "keysandstrokes@gmail.com";
    this.user.password = "password";
  }
  register()
  {
        this._registrationService.registerUser(this.user).subscribe(
           data => { console.log(this.responseStatus = data)
             }
           ,
           err => console.log(err),
           () => console.log('Request Completed')
        );
        this.status = true;
  }
}

We need to update app.module.ts file by adding registratoncomponent and forms module for bindings and httpmodule to make a http request

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
    RouterModule,
    Routes,
} from '@angular/router';
import { AppComponent }  from './app.component';
import { RegistrationComponent} from './registration.component';
@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule, RouterModule ],
    declarations: [AppComponent, RegistrationComponent],
    bootstrap: [AppComponent, RegistrationComponent ]
})
export class AppModule { }

The user class will have three properties

export class User
{
     displayName: string;
     email: string;
     password:string;
}

In the index.html file,we need to call registration component selector which is <app-registration></app-registration>

<!DOCTYPE html>
<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular.io QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
    <link rel="stylesheet" href="styles.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading App</my-app>
    <app-registration></app-registration>
</body>
</html>

Once everything is completed just hit F5 to see the user registration component
angular2-vs-reg-componentone
 
 

By coderss

One thought on “How to build Angular 2 typescript component using Visual Studio 2017”

Leave a Reply

Your email address will not be published. Required fields are marked *