Tuesday, 12 September 2017

Component - Angular 2

In this article, we quickly look into how to build Angular component to use HTML control and bind it to model. Before starting with this article, I would recommend you setup your development for Angular 2.

1- Open Visual Studio Code.
2- Open the Integrated Terminal from View Menu.
3- Create a new Project "ngDemo" with the Command Line "ng new [Project name]"
4- Run you Project with command line "ng serve".


5-Click on localhost:4200 url by pressing ctrl button. it'll open the browser and run your web application.
6- Add a folder "Component" inside of src/app directory.


7- Now add a new Component inside Component folder.


https://github.com/angular/angular-cli/wiki/generate-component 

8- It'll add two file in Component folder. 
             student-component.component.html
             student-component.component.ts

9- Add a Model Class inside app directory.


10- Replace the Student-Component.component.ts file with the below code.


11- Replace the Student-Component.component.html file with the below code.


12- Create a new file inside Component folder with name student.module.ts and add the following code to it:


13- StudentComponent also needs to be updated at declaration and bootstrap level. We will also have to update main.ts with the newly added module. Below is the update main.ts.


14- Now we need to render this Component. for this we need to update our index.html. we use studen-form selecter that we used during Component creation.


15- Now come to your browser.

16- Your Component is ready to use.

Reference: Click here

Thanks
Suraj K.

0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (10) Web Service (1) XMl (1)