Post
Ask Question

Angular 6 Integration With ASP.NET ASPX Page

In this blog, I will explain how to integrate Angular 6 within your existing ASP.NET project where your pages are in .aspx.
 
Setting up Angular 6 to a new machine.
 
Step 1 - Install NodeJS
 
You can install node.js and npm from the below URL.

https://nodejs.org/en/download/

For Angular 6, you have to install Node8.x and after successful installation, you can check version: node -v from command prompt.

Use npm -v to check NPM version. NPM should be 5.X
 
Step 2 - Then, install the Angular CLI globally. 
 
Command to install,

npm install -g @angular/cli
command to check version:
tsc -v
 
Given below is the .aspx code where I am using <app-root name="list-user"></app-root> and added reference of the JS files.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList.aspx.cs" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <base href="/">  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.     <div>  
  13.     <app-root name="list-user"></app-root>  
  14.     <script src="../AngularApp/dist/my-new-angular-app/main.js"></script>  
  15.     <script src="../AngularApp/dist/my-new-angular-app/polyfills.js"></script>  
  16.     <script src="../AngularApp/dist/my-new-angular-app/runtime.js"></script>  
  17.     <script src="../AngularApp/dist/my-new-angular-app/styles.js"></script>  
  18.     <script src="../AngularApp/dist/my-new-angular-app/vendor.js"></script>  
  19.     </div>  
  20.     </form>  
  21. </body>  
  22. </html>  
The app.component.ts file where app-root directive code -
  1. import { Component, Input, ElementRef } from '@angular/core';  
  2. import { Router, ActivatedRoute } from '@angular/router';  
  3.   
  4.  
  5. @Component({  
  6.     
  7. selector: 'app-root',  
  8.     
  9. templateUrl: './app.component.html',  
  10.     
  11. styleUrls: ['./app.component.css']  
  12. })  
  13.   

  15. export class AppComponent {  
  16.     @Input('name') name: string;  
  17.     title = 'app';  
  18.   
  19.     constructor(private router: Router, private route: ActivatedRoute, private eleRef: ElementRef) { }  
  20.   
  21.     ngOnInit(): void {  
  22.         let prop = this.eleRef.nativeElement.getAttribute('name');  
  23.         switch (prop) {  
  24.             case "testmodule":  
  25.                 this.router.navigate(['/testAJ.aspx']);  
  26.                 break;  
  27.             case "list-user":  
  28.                 this.router.navigate(['/UserList.aspx']);  
  29.                 break;  
  30.             default:  
  31.                 this.router.navigate(['/']);  
  32.                 break;  
  33.         }  
  34.     }  
  35. }  
app-routing.modules.ts

Now, create an array of routes where we have defined which component will be called and after that, register this into Root Module. Now, you can output this routing component via the <router-outlet> component.Module.
  1. import { NgModule, ModuleWithProviders  } from '@angular/core';  
  2. import { RouterModule, Routes  } from '@angular/router';  
  3.   
  4. import { ListUserComponent } from './listModule/list-user.component';  
  5.   
  6. const routes: Routes = [  
  7.     { path: 'testAJ.aspx', component: TestModuleComponent },  
  8.     { path: 'UserList.aspx', component: ListUserComponent }  
  9. ];  
  10. export const routing = RouterModule.forRoot(routes);  
Add this in app.component.html,
  1. <router-outlet></router-outlet>  
Model Class
  1. export class State {  
  2.     stateID: string;  
  3.     stateName: string;  
  4. }  
Service Class
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient, HttpHeaders } from '@angular/common/http';  
  3. import { State } from "../model/state.model";  
  4.   
  5. let httpOptions = {  
  6.     headers: new HttpHeaders({  
  7.         'Content-Type': 'application/json',  
  8.         'Cache-Control': 'no-cache'  
  9.     })  
  10. };  
  11.   
  12. @Injectable()  
  13.   
  14. export class UserService {  
  15.     constructor(private http: HttpClient) { }  
  16.     baseUrl: string = 'put your Api here'  
  17.   
  18.     getSatesByCountryCode(_countryCode: string) {  
  19.         let body = JSON.stringify({ CountryCode: _countryCode });  
  20.         return this.http.post(this.baseUrl + 'GetStatebyCountryId', body, httpOptions);  
  21.     }    
  22. }  
The list-user.component.ts file -
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Router } from "@angular/router";  
  3. import { UserService } from "../service/user.service";  
  4. import { State } from "../model/state.model";  
  5. import { products } from '../model/products';  
  6.   
  7. @Component({  
  8.     selector: 'list-user',  
  9.     templateUrl: './list-user.component.html'  
  10. })  
  11.   
  12. export class ListUserComponent {  
  13.     states: any = [];  
  14.    
  15.     constructor(private router: Router, private userService: UserService) { }  
  16.   
  17.     ngOnInit() {  
  18.         this.userService.getSatesByCountryCode('001')  
  19.             .subscribe(data => {  
  20.                 this.states = data;  
  21.                 this.states = JSON.parse(this.states.d);  
  22.             }, error => {   
  23.                 console.log(error);  
  24.             }  
  25.         );  
  26.     }  
  27. }  
The list-user.component.html file.
  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>State ID</th>  
  5.             <th>State Name</th>  
  6.         </tr>  
  7.     </thead>  
  8.     <tbody>  
  9.         <tr *ngFor="let state of states">  
  10.             <td>{{state.StateID}}</td>  
  11.             <td>{{state.StateName}}</td>  
  12.         </tr>  
  13.     </tbody>  
  14. </table>  
  15.   
Conclusion

In this article, I have explained how to call the API from service and bind the data to HTML page with use of Angular 6 and ASP.NET. In my next blog, I will show how to use Kendo UI with Angular 6.

Below is the screenshot of output in the browser.
 
 
Next Recommended Reading Encrypt - Encrypt Payload Using Angular 11 And ASP.NET Core