Post
Ask Question

Getting Started With ASP.NET Core 1.0 RC2 And Angular2

output

Introduction

In this article, we will see in detail about Angular2 with ASP.NET Core 1.0 RC2.

You can also view our previous article here,

In this article, we will see in detail how to:

  • Create our ASP.NET Core 1.0 Web Application.
  • How to add TypeScript JSON Configuration File.
  • How to add grunt package, using NPM configuration file.
  • How to configure Grunt File.
  • Adding the dependencies to install Angular2 and all the other files.
  • How to create our Angular2 App, and boot using Type Script file.
  • Create HTML File.
  • How to run the Grunt file using Visual Studio Task Runner Explorer.
  • How to Run and view our Sample.
  • How to create multiple components in same App file.
  • A few sample examples in Angular2. 
  • One Way Binding.
  • Two Way Binding.
  • NG- Click.
  • NG IF.
  • NG For.
  • NG For with Multi array.
  • How to show the Angular2 Component result in our HTML page.

Prerequisites

Visual Studio 2015: You can download it from here.

ASP.NET Core 1.0 RC2: download link,

Code Part

Step 1: Create our ASP.NET Core 1.0 Web Application.

After installing both Visual Studio 2015 and ASP.NET Core 1.0 RC2, click start, followed by clicking Programs and selecting Visual Studio 2015 and clicking Visual Studio 2015. Click New followed by the Project, selecting Web and subsequently selecting ASP.NET Core Web Application. Enter your project name and click OK.

Project

Afterwards, select Web Application. If you are not hosting in the Cloud, then you can uncheck the Host in the Cloud at the bottom right corner. Click OK.

Web Application

Now we have the following display on the screen:

Web Application

Step 2: How to add TypeScript JSON Configuration File

Subsequently TypeScript JSON file will be the file that specifies the root files and the compiler options, required to compile the project .To know more about TypeScript JSON configuration, kindly visit these sites.

To create the TypeScript JSON file, right click the project and click Add new Item.

create

Select TypeScript JSCON Configuration File and Click OK. The file will look as shown below:.

Configuration

Now copy the code given below and replace with your config file.

  1. "compilerOptions": {  
  2. "emitDecoratorMetadata": true,  
  3. "experimentalDecorators": true,  
  4. "module": "commonjs",  
  5. "moduleResolution": "node",  
  6. "noImplicitAny": false,  
  7. "noEmitOnError": true,  
  8. "removeComments": false,  
  9. "target": "es5",  
  10. "sourceMap": true  
Configuration

Step 3: How to add grunt package using NPM configuration file

Now, we need to add NPM Configuration file to add a Grunt package to run our JavaScripts. As we have created a Web Application, the NPM Configuration File will be located in our project. 

By default, we can’t view our NPM Configuration File. The NPM Configuration file will be in the name of “package.JSON”. To view it in the Solution Explorer, click “Show All Files”.

Now, open the “package.JSON” file . First, we need to change the name to our project solution name and add our Grunt package. We can see the code here, given below in the image:

Configuration

Here, we have changed the name as our Solution name and also added the Grunt package.
  1. {  
  2.   "name": "test",  
  3.   "version": "0.0.0",  
  4.   "private": true,  
  5. "devDependencies": {  
  6.     "grunt": "1.0.1",  
  7.     "grunt-contrib-copy": "1.0.0",  
  8.     "grunt-contrib-uglify": "1.0.1",  
  9.     "grunt-contrib-watch": "1.0.0",  
  10.     "grunt-ts": "5.5.1",  
  11.     "gulp": "3.8.11",  
  12.     "gulp-concat": "2.5.2",  
  13.     "gulp-cssmin": "0.1.7",  
  14.     "gulp-uglify": "1.2.0",  
  15.     "rimraf": "2.2.8"  
  16.   }  
  17. }  
Now, save the package.json file and you should be able to see a Grunt package. Under Dependencies, the npm folder will be the first restored, and then installed.

Restoring

Restoring

Al Installed

Al Installed

Step 4: Configure Grunt File

Grunt is used to build all our client side resources like JavaScript for our project.

First step is to add a Grunt file to our project. Right click our project, select Grunt Configuration file and click Add.

Grunt

After creating the file, now we need to edit this file to add the loaded plugins, configure the plugins, and define the tasks.

Here in our Grunt file, we have to first load the plugins which we have added in our npm. Using loadNpmTask, here we load 'grunt-contrib-copy ,'grunt-contrib-uglify', 'grunt-contrib-watch'.

Grunt

Next, we configure the Grunt. Add the app.js file in our wwwroot folder. All our Script files from the Scripts folder results will be added in this app.js file. Next, we need to copy all the Script files from 'node_modules/ to our local js folder.

The watch plugin will be used to check for any changes on JavaScript file and update app.js with all the new changes.

This file is the main entry point for defining Grunt tasks using Grunt plugins.

Click here to learn more.
  1. module.exports = function (grunt) {  
  2.     grunt.loadNpmTasks('grunt-contrib-copy');  
  3.     grunt.loadNpmTasks('grunt-contrib-uglify');  
  4.     grunt.loadNpmTasks('grunt-contrib-watch');  
  5.     grunt.loadNpmTasks('grunt-ts');  
  6.     grunt.initConfig({  
  7.         ts:  
  8.         {  
  9.             base:  
  10.             {  
  11.                 src: ['Scripts/app/boot.ts', 'Scripts/app/**/*.ts'],  
  12.                 outDir: 'wwwroot/app',  
  13.                 tsconfig: './tsconfig.json'  
  14.             }  
  15.         },  
  16.         uglify:  
  17.         {  
  18.             my_target:  
  19.             {  
  20.                 files: [{  
  21.                     expand: true,  
  22.                     cwd: 'wwwroot/app',  
  23.                     src: ['**/*.js'],  
  24.                     dest: 'wwwroot/app'  
  25.                 }]  
  26.             },  
  27.             options:  
  28.             {  
  29.                 sourceMap: true  
  30.             }  
  31.         },  
  32.         // Copy all JS files from external libraries and required NPM packages to wwwroot/js    
  33.         copy: {  
  34.             main: {  
  35.                 files:  
  36.                      [{  
  37.                          expand: true,  
  38.                          flatten: true,  
  39.                          src: ['Scripts/js/**/*.js', 'node_modules/es6-shim/es6-shim.min.js', 'node_modules/systemjs/dist/system-polyfills.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/systemjs/dist/system.src.js', 'node_modules/rxjs/bundles/Rx.js', 'node_modules/angular2/bundles/angular2.dev.js'],  
  40.                          dest: 'wwwroot/js/',  
  41.                          filter: 'isFile'  
  42.                      }]  
  43.             }  
  44.         },  
  45.         // Watch specified files and define what to do upon file changes    
  46.         watch: {  
  47.             scripts: {  
  48.                 files: ['Scripts/**/*.js'],  
  49.                 tasks: ['ts', 'uglify', 'copy']  
  50.             }  
  51.         }  
  52.     });  
  53.     // Define the default task so it will launch all other tasks    
  54.     grunt.registerTask('default', ['ts', 'uglify', 'copy', 'watch']);  
  55. };  
Step 5: Adding Dependencies to install Angular2 and all other files

We are using NPM to install our Angular2 in our Web Application. Open our Package.JSON file and the dependencies, given below:
  1. "dependencies": 
  2. {  
  3.     "@angular/http": "2.0.0-rc.1",  
  4.     "angular2": "^2.0.0-beta.8",  
  5.     "angular2-jwt": "0.1.16",  
  6.     "angular2-meteor": "0.5.5",  
  7.     "cors": "2.7.1",  
  8.     "systemjs": "0.19.22",  
  9.     "es6-promise": "^3.0.2",  
  10.     "es6-shim": "^0.33.3",  
  11.     "reflect-metadata": "0.1.2",  
  12.     "rxjs": "5.0.0-beta.2",  
  13.     "tsd": "^0.6.5",  
  14.     "zone.js": "0.5.15"  
  15.   },  
The edited Package.json file will look as shown below:

Package.json

Save the file and wait for few seconds to complete all the dependencies to install.

file

Step 6: How to create our Angular2 App, and boot using Type Script file.

Now, it’s time to create our Angular2 application. First, create a folder named Scripts. Right click the project, click add new folder and name the folder “Scripts”. Now, we will create our TypeScript files inside this Scripts folder.

To work with Angular2, we need to create two important TypeScript files, which are:  
  1. Component file is the one where we write our Angular coding.
  2. Boot file: To run our component app .

Creating App TypeScript file

Right click on Scripts folder and click add new item. Select TypeScript file, name the file App.ts and click Add.

TypeScript file

In App.ts file, we have three parts, which are-

  1. Import part
  2. Component part
  3. We have the class to write our business logics.

Here, we can see a simple basic one-way binding example to display the welcome message in side h1 tag., shown below:

One-way Data Binding -> From Data Source to view

  1. import {Component} from 'angular2/core';  
  2.   
  3. // 1) One Way  
  4. @Component({  
  5.     selector: 'myapp1',  
  6.     template: '<h2 style="color:blue;">Welcome to Angular2 Tutorial using ASP.NET Core RC2 by SYED SHANU</h2>'  
  7. })  
  8. export class myAppComponent1 {  
  9. } 
In the component, we have a selector and a template. The selector is used to give the name for this app and in our HTML file, we use this selector name to display our HTML. In the template, we write our code.

Next, we need to add the boot.ts file to run our app.

Creating boot TypeScript file

Right click on Scripts folder and click add new Item. Select TypeScript file, name the file as boot.ts and click Add.

boot TypeScript file

In boot.ts file, we add the code given below. First, we import bootstrap file to load and run our app file, and we need to import our app component. Note to import our app, we need to give the same class name which was given in our app typescript file and give our app path in from as ’./app’ .Next, we run our app by adding the app name in bootstrap as bootstrap (myAppComponent1);.
  1. ///<reference path="../node_modules/angular2/typings/browser.d.ts" />   
  2.   
  3. import {bootstrap} from 'angular2/platform/browser'  
  4. import {myAppComponent1} from './app'  
  5.   
  6. bootstrap(myAppComponent1);  
Step 7: Creating HTML File

Next, we need to create our HTML page to view the result.To add HTML file, right click on wwwroot folder, click add new item, give the name as index.html and click Add.

HTML File

In HTML file, replace the code given below. Here, we can see first in the header part, we add all the script reference files and in the script, we load our boot file to run our app. In the body part, we display the result, using the component selector name .In our app component, we have given the selector name as “myapp1”. In this HTML, display the result and we will add a tag like this <myapp1>My APP1 Loading ...</myapp1>
  1. <html>  
  2.   
  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>  
  18.   
  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>  
  33.   
  34. <body>  
  35.     <!-- Application PlaceHolder -->  
  36.     <h1> One Way Simple Binding</h1>  
  37.     <myapp1>My APP1 Loading ...</myapp1>  
  38.     <hr />  
  39. </body>  
  40.   
  41. </html>  
Hence, we have successfully created our first Angular2 and ASP.NET core 1.0 Web Application --  but wait, we have to do one more pending work to run our Application. Yes, we need to run our Grunt file to create our entire script file in our wwwroot scripts folder.

Step 8: Run the Grunt file using Visual Studio Task Runner Explorer

Now, we need to run the Grunt file, using Visual Studio task runner.

To view the Task runner, click the menu view-> Other Windows-> Task runner Explorer.

Runner Explorer

We can also open Task runner by clicking right on our Gruntfile.js in Solution Explorer and clicking on Task runner Explorer.

Runner Explorer

Now, we can see our Task runner Explorer.

Runner Explorer

Click GruntFile.js and click refresh button on the top left.

GruntFile.js

Now, we can see GruntFile has been added.

GruntFile.js

Right click the default under Alias Task and click Run.

Run

Now, our Grunt file has been successfully run in our project. When we add a script file, we can see a new app.js file will be created in our wwwroot folder.

wwwroot

Now, we have completed our first sample Application, using Angular2 in ASP.NET Core.

Run the program to see our sample One Way binding.

program

Step 9: How to create multiple components in same App file.

In our previous sample, we have added one component in our app Type Script file. Instead of creating multiple app files here, we will add multiple components in our app file, add the bootstrap for each app in our boot file and finally in our HTML file, we add the app component selector name to view our result.

Note

Each time when you change the app or boot the file, run the Grunt file using the Task runner Explorer to view our updated data.

Here, in the example given below, we can see we will be adding two components in our app file. 
  1. Component example for One-Way data binding.
  2. Component example for Two-Way data binding.

There are a few more examples in Angular2 which explain:

  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';  
    4.   
    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. }  
    12.   
    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;  
    20.   
    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" />   
    2.   
    3. import {bootstrap} from 'angular2/platform/browser'  
    4. import {myAppComponent1} from './app'  
    5. import {myAppComponent2} from './app'  
    6.   
    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 />  
    5.   
    6.     <h1> Two Way Binding</h1>  
    7.     <myapp2>My APP2 Loading ...</myapp2>  
    8.     <hr />  
    Output

    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;  
    8.   
    9.     constructotr() {  
    10.         this.fruitName = "Apple";  
    11.     }  
    12.     getFruitName() {  
    13.   
    14.         if (this.fruitName == "Apple")  
    15.             this.fruitName = "Mango";  
    16.         else  
    17.             this.fruitName = "Apple";  
    18.   
    19.         alert("Fruit Name is : " + this.fruitName);  
    20.     }  
    21.   
    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.

    Output

    When we click OK on an Alert box, we can see in the button that the fruit name has been added.

    Output
  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. })  
    7.   
    8. export class myAppComponent4 {  
    9.     fruitName: string;  
    10.     isApple: Boolean;  
    11.   
    12.     constructotr() {  
    13.         this.fruitName = "Apple";  
    14.         this.isApple = false;  
    15.     }  
    16.     getFruitName() {  
    17.   
    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.         }  
    26.   
    27.   
    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.

    Output
    The result will be displayed, depending on the "if" condition used.

    Output

  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.     })  
    13.   
    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
    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;">  
    8.    
    9. <div *ngFor="#std of stdDetails">  
    10.     {{std.StdID}}  
    11.     {{std.StdName}}  
    12.     {{std.Email}}  
    13. </div>  
    14.   <h3>  
    15.         `  
    16.     })  
    17.   
    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
    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';  
    4.   
    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. }  
    12.   
    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;  
    20.   
    21.     constructotr() {  
    22.         this.myName = "Shanu";  
    23.     }  
    24. }  
    25.   
    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;  
    33.   
    34.     constructotr() {  
    35.         this.fruitName = "Apple";  
    36.     }  
    37.     getFruitName() {  
    38.   
    39.         if (this.fruitName == "Apple")  
    40.             this.fruitName = "Mango";  
    41.         else  
    42.             this.fruitName = "Apple";  
    43.   
    44.         alert("Fruit Name is : " + this.fruitName);  
    45.     }  
    46.   
    47. }  
    48.   
    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. })  
    55.   
    56. export class myAppComponent4 {  
    57.     fruitName: string;  
    58.     isApple: Boolean;  
    59.   
    60.     constructotr() {  
    61.         this.fruitName = "Apple";  
    62.         this.isApple = false;  
    63.     }  
    64.     getFruitName() {  
    65.   
    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.         }  
    74.   
    75.   
    76.         alert("Fruit Name is : " + this.fruitName);  
    77.     }  
    78. }  
    79.   
    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.     })  
    92.   
    93.     export class myAppComponent5{  
    94.         arrayofName = ["Shanu", "Afraz", "Afreen"];      
    95. }  
    96.   
    97.   
    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;">  
    105.    
    106. <div *ngFor="#std of stdDetails">  
    107.     {{std.StdID}}  
    108.     {{std.StdName}}  
    109.     {{std.Email}}  
    110. </div>  
    111.   <h3>  
    112.         `  
    113.     })  
    114.   
    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" />   
    2.   
    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'  
    10.   
    11. bootstrap(myAppComponent1);  
    12. bootstrap(myAppComponent2);  
    13. bootstrap(myAppComponent3);  
    14. bootstrap(myAppComponent4);  
    15. bootstrap(myAppComponent5);  
    16. bootstrap(myAppComponent6);  
  3. HTML Code
    1. <html>  
    2.   
    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>  
    18.   
    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>  
    33.   
    34. <body>  
    35.     <!-- Application PlaceHolder -->  
    36.     <h1> One Way Simple Binding</h1>  
    37.     <myapp1>My APP1 Loading ...</myapp1>  
    38.     <hr />  
    39.   
    40.     <h1> Two Way Binding</h1>  
    41.     <myapp2>My APP2 Loading ...</myapp2>  
    42.     <hr />  
    43.   
    44.     <h1> NG Button CLick</h1>  
    45.     <myapp3>My APP3 Loading ...</myapp3>  
    46.     <hr />  
    47.   
    48.     <h1> NG IF& NG CLick</h1>  
    49.     <myapp4>My APP4 Loading ...</myapp4>  
    50.     <hr />  
    51.   
    52.     <h1> NG For</h1>  
    53.     <myapp5>My APP5 Loading ...</myapp5>  
    54.     <hr />  
    55.   
    56.     <h1> NG For with Multi Array</h1>  
    57.     <myapp6>My APP5 Loading ...</myapp6>  
    58.     <hr />  
    59. </body>  
    60.   
    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


Similar Articles