How to build Angular 2 typescript component using Visual Studio 2017

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

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

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

The user class will have three properties

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

Once everything is completed just hit F5 to see the user registration component

angular2-vs-reg-componentone