Getting Started With ASP.NET Core 1.0 RC2 And Angular2

1. Two-way Data Binding -> Used for data entry to binding and display.
   
   Here, we can see in Two way data binding, we have declared the variable named “myName” in an export class, which binds the result in HTML, and the code is given below:
   
   1. import {Component} from 'angular2/core';
   2. import { NgIf, NgFor} from 'angular2/common';
   3. import { students } from './students';
   5. // 1) One Way
   6. @Component({
   7. selector: 'myapp1',
   8. template: '<h2 style="color:blue;">Welcome to Angular2 Tutorial using ASP.NET Core RC2 by SYED SHANU</h2>'
   9. })
   10. export class myAppComponent1 {
   11. }
   13. // 2) TWO way binding
   14. @Component({
   15. selector: 'myapp2',
   16. template: '<h3> Enter Your Name : <input [(ngModel)]="myName" > <br />' + '<h2 style="color:green;"> Your Name is : {{myName}} </h2> '
   17. })
   18. export class myAppComponent2 {
   19. myName: string;
   21. constructotr() {
   22. this.myName = "Shanu";
   23. }
   24. }
   In boot.ts, we will add one more component to be run from our app.
   
   1. ///<reference path="../node_modules/angular2/typings/browser.d.ts" />
   3. import {bootstrap} from 'angular2/platform/browser'
   4. import {myAppComponent1} from './app'
   5. import {myAppComponent2} from './app'
   7. bootstrap(myAppComponent1);
   8. bootstrap(myAppComponent2);
   In HTMl add the new Componet Selector to display our Two way binding result.
   
   1. <!-- Application PlaceHolder -->
   2. <h1> One Way Simple Binding</h1>
   3. <myapp1>My APP1 Loading ...</myapp1>
   4. <hr />
   6. <h1> Two Way Binding</h1>
   7. <myapp2>My APP2 Loading ...</myapp2>
   8. <hr />
   Output
   
   
   
2. NG Click -> Now we will see a sample to create our button click from our component.
   
   In our app, we have added one more component, added the selector name as 'myapp3' and the class name as myAppComponent3.
   
   In the template, we have created a button and in the button click event, we call the ’getFruitName’ method.
   In the ’getFruitName’, we check for fruit name and change the name in each click as “Apple’ or “Mango”.
   
   1. // 3) Button Click
   2. @Component({
   3. selector: 'myapp3',
   4. template: '<button (click)="getFruitName($event)" >' + '<h2 style="color:Red;"> Click Button to see the Fruit name : {{fruitName}} </h2> '
   5. })
   6. export class myAppComponent3 {
   7. fruitName: string;
   9. constructotr() {
   10. this.fruitName = "Apple";
   11. }
   12. getFruitName() {
   14. if (this.fruitName == "Apple")
   15. this.fruitName = "Mango";
   16. else
   17. this.fruitName = "Apple";
   19. alert("Fruit Name is : " + this.fruitName);
   20. }
   22. }
   Note
   
   In boot.ts file, add the component and in HTML, add the selector name. Finally, run Grunt and the Application.
   
   Output: When we click on the button first, we get the display of the fruit name in an alert box.
   
   
   
   When we click OK on an Alert box, we can see in the button that the fruit name has been added.
   
   
   
3. NG IF -> Now, we will see a sample for NG IF. We have used the same sample given above and created a new component to add to our if condition check.
   
   In our app, we have added one more component and added the selector name as 'myapp4' and the class name as myAppComponent4.
   
   In the template, we have created a button and in the button click event, we call the ’getFruitName’ method.
   
   In the ’getFruitName’, we check for the fruit name and change the name in each click as “Apple’ or “Mango”. In this method, we set the isApple Boolean variable as true, if the fruitname is Apple and in our template, we have used the NG IF to display the appropriate result.
   
   1. // 4) NG-IF
   2. @Component({
   3. selector: 'myapp4',
   4. directives: [NgIf],
   5. template: '<button (click)="getFruitName($event)" >' + '<h2 style="color:#8340AF;"> <p *ngIf="isApple">Clicked Apple :) </p> <p *ngIf="!isApple">Clicked Mango :)</p> </h2> '
   6. })
   8. export class myAppComponent4 {
   9. fruitName: string;
   10. isApple: Boolean;
   12. constructotr() {
   13. this.fruitName = "Apple";
   14. this.isApple = false;
   15. }
   16. getFruitName() {
   18. if (this.fruitName == "Apple") {
   19. this.fruitName = "Mango";
   20. this.isApple = false;
   21. }
   22. else {
   23. this.fruitName = "Apple";
   24. this.isApple = true;
   25. }
   28. alert("Fruit Name is : " + this.fruitName);
   29. }
   30. }
   Note
   
   In boot.ts file, add the component and in HTML, add the selector name. Finally, run the Grunt and the Application.
   
   Output: When we click the button, first we display the fruit name in an Alert box.
   
   
   The result will be displayed, depending on the "if" condition used.
   
   
   
   
4. NG FOR -> Now we will see a sample for Ng FOR .
   
   In our app, we have added one more component, added the selector name as 'myapp5' and the class name as myAppComponent5.
   
   In the template, we display all the names one by one in the order list, using *NG FOR
   
   In the myAppComponent5 class, we have created an array as arrayofName to be bound in the template using *NG FOR.
   
   1. // 5) NG-FOR
   2. @Component({
   3. selector: 'myapp5',
   4. directives: [NgFor],
   5. template: `
   6. <h2 style="color:#C70039;">Name List using For NG For</h2>
   7. <h3 style="color:#3D693D;">
   8. <ul>
   9. <li *ngFor="#ourname of arrayofName">{{ourname}}</li>
   10. </ul> </h3>
   11. `
   12. })
   14. export class myAppComponent5{
   15. arrayofName = ["Shanu", "Afraz", "Afreen"];
   16. }
   Note
   
   In boot.ts file, add the component and in HTML, add the selector name. Finally, run Grunt and the Application.
   
   Output
   
   
5. NG FOR using Multi array ->
   
   First, we will create a new Type Script file to create a class file to create all multi array variables. Right click Scripts folder and click add new Item-> Select Type Script and name the file as “Students”.
   
   Here, we add Studentid, name and Email in this class, as shown below:
   
   1. export class students
   2. {
   3. constructor
   4. (
   5. public StdID: number,
   6. public StdName: string,
   7. public Email: string
   8. ) { }
   9. }
   In our app component, import the student class.
   
   1. import {Component} from 'angular2/core';
   2. import { NgIf, NgFor} from 'angular2/common';
   3. import { students } from './students';
   Now, we will see a sample for Ng FOR.
   
   In our app, we have added one more component; add the selector name as 'myapp6' and the class name as myAppComponent6.
   
   In the myAppComponent6, we add all values for the student details in an array list and we will bind the result in the template div tag, using *ngFor="#std of stdDetails".
   
   1. // 6) NG-FOR with Multi array using class
   2. @Component({
   3. selector: 'myapp6',
   4. directives: [NgFor],
   5. template: `
   6. <h2 style="color:#D60F30;">Student Details</h2>
   7. <h3 style="color:#FF5733;">
   9. <div *ngFor="#std of stdDetails">
   10. {{std.StdID}}
   11. {{std.StdName}}
   12. {{std.Email}}
   13. </div>
   14. <h3>
   15. `
   16. })
   18. export class myAppComponent6 {
   19. stdDetails = [
   20. new students(1, 'SHANU', '[email protected]'),
   21. new students(1, 'Afraz', '[email protected]'),
   22. new students(1, 'Afreen', '[email protected]')
   23. ];
   24. }
   Note
   
   In boot.ts file, add the component and in HTML, add the selector name. Finally, run Grunt and the Application.
   
   Output
   
   

Complete Code

1. app.ts Code
   
   1. import {Component} from 'angular2/core';
   2. import { NgIf, NgFor} from 'angular2/common';
   3. import { students } from './students';
   5. // 1) One Way
   6. @Component({
   7. selector: 'myapp1',
   8. template: '<h2 style="color:blue;">Welcome to Angular2 Tutorial using ASP.NET Core RC2 by SYED SHANU</h2>'
   9. })
   10. export class myAppComponent1 {
   11. }
   13. // 2) TWO way binding
   14. @Component({
   15. selector: 'myapp2',
   16. template: '<h3> Enter Your Name : <input [(ngModel)]="myName" > <br />' + '<h2 style="color:green;"> Your Name is : {{myName}} </h2> '
   17. })
   18. export class myAppComponent2 {
   19. myName: string;
   21. constructotr() {
   22. this.myName = "Shanu";
   23. }
   24. }
   26. // 3) Button Click
   27. @Component({
   28. selector: 'myapp3',
   29. template: '<button (click)="getFruitName($event)" >' + '<h2 style="color:Red;"> Click Button to see the Fruit name : {{fruitName}} </h2> '
   30. })
   31. export class myAppComponent3 {
   32. fruitName: string;
   34. constructotr() {
   35. this.fruitName = "Apple";
   36. }
   37. getFruitName() {
   39. if (this.fruitName == "Apple")
   40. this.fruitName = "Mango";
   41. else
   42. this.fruitName = "Apple";
   44. alert("Fruit Name is : " + this.fruitName);
   45. }
   47. }
   49. // 4) NG-IF
   50. @Component({
   51. selector: 'myapp4',
   52. directives: [NgIf],
   53. template: '<button (click)="getFruitName($event)" >' + '<h2 style="color:#8340AF;"> <p *ngIf="isApple">Clicked Apple :) </p> <p *ngIf="!isApple">Clicked Mango :)</p> </h2> '
   54. })
   56. export class myAppComponent4 {
   57. fruitName: string;
   58. isApple: Boolean;
   60. constructotr() {
   61. this.fruitName = "Apple";
   62. this.isApple = false;
   63. }
   64. getFruitName() {
   66. if (this.fruitName == "Apple") {
   67. this.fruitName = "Mango";
   68. this.isApple = false;
   69. }
   70. else {
   71. this.fruitName = "Apple";
   72. this.isApple = true;
   73. }
   76. alert("Fruit Name is : " + this.fruitName);
   77. }
   78. }
   80. // 5) NG-FOR
   81. @Component({
   82. selector: 'myapp5',
   83. directives: [NgFor],
   84. template: `
   85. <h2 style="color:#C70039;">Name List using For NG For</h2>
   86. <h3 style="color:#3D693D;">
   87. <ul>
   88. <li *ngFor="#ourname of arrayofName">{{ourname}}</li>
   89. </ul> </h3>
   90. `
   91. })
   93. export class myAppComponent5{
   94. arrayofName = ["Shanu", "Afraz", "Afreen"];
   95. }
   98. // 6) NG-FOR with Multi array using class
   99. @Component({
   100. selector: 'myapp6',
   101. directives: [NgFor],
   102. template: `
   103. <h2 style="color:#D60F30;">Student Details</h2>
   104. <h3 style="color:#FF5733;">
   106. <div *ngFor="#std of stdDetails">
   107. {{std.StdID}}
   108. {{std.StdName}}
   109. {{std.Email}}
   110. </div>
   111. <h3>
   112. `
   113. })
   115. export class myAppComponent6 {
   116. stdDetails = [
   117. new students(1, 'SHANU', '[email protected]'),
   118. new students(1, 'Afraz', '[email protected]'),
   119. new students(1, 'Afreen', '[email protected]')
   120. ];
   121. }
2. boot.ts Code
   
   1. ///<reference path="../node_modules/angular2/typings/browser.d.ts" />
   3. import {bootstrap} from 'angular2/platform/browser'
   4. import {myAppComponent1} from './app'
   5. import {myAppComponent2} from './app'
   6. import {myAppComponent3} from './app'
   7. import {myAppComponent4} from './app'
   8. import {myAppComponent5} from './app'
   9. import {myAppComponent6} from './app'
   11. bootstrap(myAppComponent1);
   12. bootstrap(myAppComponent2);
   13. bootstrap(myAppComponent3);
   14. bootstrap(myAppComponent4);
   15. bootstrap(myAppComponent5);
   16. bootstrap(myAppComponent6);
3. HTML Code
   
   1. <html>
   3. <head>
   4. <title>ASP.NET Core: AngularJS 2 Demo</title>
   5. <meta name="viewport" content="width=device-width, initial-scale=1">
   6. <!-- 1. Load libraries -->
   7. <!-- IE required polyfills -->
   8. <script src="/js/es6-shim.min.js"></script>
   9. <script src="/js/system-polyfills.js"></script>
   10. <!-- Angular2 libraries -->
   11. <script src="/js/angular2-polyfills.js"></script>
   12. <script src="/js/system.src.js"></script>
   13. <script src="/js/Rx.js"></script>
   14. <script src="/js/angular2.dev.js"></script>
   15. <script src="https://code.angularjs.org/2.0.0-alpha.46/http.dev.js"></script>
   16. <!-- Bootstrap via SystemJS -->
   17. <script>
   19. System.config
   20. ({
   21. packages:
   22. {
   23. "app":
   24. {
   25. defaultExtension: 'js'
   26. },
   27. 'lib': { defaultExtension: 'js' }
   28. }
   29. });
   30. System.import('app/boot').then(null, console.error.bind(console));
   31. </script>
   32. </head>
   34. <body>
   35. <!-- Application PlaceHolder -->
   36. <h1> One Way Simple Binding</h1>
   37. <myapp1>My APP1 Loading ...</myapp1>
   38. <hr />
   40. <h1> Two Way Binding</h1>
   41. <myapp2>My APP2 Loading ...</myapp2>
   42. <hr />
   44. <h1> NG Button CLick</h1>
   45. <myapp3>My APP3 Loading ...</myapp3>
   46. <hr />
   48. <h1> NG IF& NG CLick</h1>
   49. <myapp4>My APP4 Loading ...</myapp4>
   50. <hr />
   52. <h1> NG For</h1>
   53. <myapp5>My APP5 Loading ...</myapp5>
   54. <hr />
   56. <h1> NG For with Multi Array</h1>
   57. <myapp6>My APP5 Loading ...</myapp6>
   58. <hr />
   59. </body>
   61. </html>

Hope this article helps you. Soon, we will see in detail how to use Web API and Angular2 in ASP.NET Core 1.0.

Reference website