In this article, we are going to learn about how we can setup Angular 6.0 in ASP.Net Core Web API project and develop the contact list & form component using Angular Material UI.

To setup Angular 6.0 in the project, first, we have to install NodeJS in the development environment. We can download NodeJS installer from NodeJS website. and then check the version on NodeJS as below.

Now, let us globally install Angular CLI package by enter “npm install –g angular/[email protected]”, as shown in below screenshot.

Scaffold Angular

To scaffold Angular, enter “ng new Contact-App --skip-install” command in VS code terminal as below.

Here, --skip-install option is used to skip installation of the npm packages. And Contact-App is our Angular app name.

After the project is created, we move all the files & folders from Contact-App to Root folder as below:

Then we enter ‘npm install’ command in terminal to install all required packages for Angular.

Change Angular Configuration

Go to ‘angular.json’ file, it is a configuration schema file.

We changed ‘wwwroot’ folder path in OutputPath.

Then enter ng build command in terminal.

We can see generated files under wwwroot folder.

Configure startup to route to angular application

We have added the following code to configure method in ‘startup.cs’. Here we have setup mvc default rout to index.html that generates under wwwroot folder.

  1. //Redirect non api calls to angular app that will handle routing of the app.
  2. app.Use(async (context, next) => {
  3. await next();
  4. if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value) && !context.Request.Path.Value.StartsWith("/api/")) {
  5. context.Request.Path = "/index.html";
  6. await next();
  7. }
  8. });
  9. // configure the app to serve index.html from /wwwroot folder
  10. app.UseDefaultFiles();
  11. app.UseStaticFiles();
  12. // configure the app for usage as api
  13. app.UseMvcWithDefaultRoute();
Now run project by enter ‘dotnet run’ command in terminal and open ‘localhost:5000’ URL in browser.

Setup angular material UI

Install angular material packages and dependencies.

Please go through this article to get more details about material components.

To use angular material UI components in our Angular contact application, we have created a separate module named ‘app.material.module.ts’ in app folder.

In this module, we imported all dependant material components and we have included in our main app module in this module .

Then, we have imported Angular material theme in the main style.css in src folder

  1. @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Then, we added this link of material icons into index.html in src folder:

  1. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Generate contact list & form component

To generate new component, we used ‘ng generate component’ command as below,

This we have set up routing for that component in ‘app.routing.ts’.

  1. import {
  2. ModuleWithProviders
  3. } from '@angular/core';
  4. import {
  5. Routes,
  6. RouterModule
  7. } from '@angular/router';
  8. import {
  9. AppComponent
  10. } from './app.component';
  11. import {
  12. ContactlistComponent
  13. } from './contactlist/contactlist.component';
  14. import {
  15. ContactformComponent
  16. } from './contactform/contactform.component';
  17. const appRoutes: Routes = [{
  18. path: '',
  19. pathMatch: 'full',
  20. component: ContactlistComponent
  21. }, {
  22. path: 'contactform',
  23. component: ContactformComponent
  24. }];
  25. export const Routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Create angular services

To create a consumed contact API that we have created Part 1; we are generating Angular contact services class in app folder using this command:

‘ng generate service contact’

  1. import {
  2. Injectable
  3. } from '@angular/core';
  4. import {
  5. HttpClient,
  6. HttpParams,
  7. HttpErrorResponse
  8. } from '@angular/common/http';
  9. import {
  10. HttpHeaders
  11. } from '@angular/common/http';
  12. import {
  13. Observable,
  14. throwError
  15. } from 'rxjs';
  16. import {
  17. catchError
  18. } from 'rxjs/operators';
  19. import {
  20. IContact
  21. } from '../model/contact';
  22. const httpOptions = {
  23. headers: new HttpHeaders({
  24. 'Content-Type': 'application/json'
  25. })
  26. };
  27. @Injectable()
  28. export class ContactService {
  29. constructor(private http: HttpClient) {}
  30. // get all contact data
  31. getAllContact(url: string): Observable < IContact[] > {
  32. return this.http.get < IContact[] > (url).pipe(catchError(this.handleError));
  33. }
  34. // insert new contact details
  35. addContact(url: string, contact: IContact): Observable < any > {
  36. return this.http.post(url, JSON.stringify(contact), httpOptions).pipe(catchError(this.handleError));
  37. }
  38. // update contact details
  39. updateContact(url: string, id: number, contact: IContact): Observable < any > {
  40. const newurl = `${url}?id=${id}`;
  41. return this.http.put(newurl, contact, httpOptions).pipe(catchError(this.handleError));
  42. }
  43. // delete contact information
  44. deleteContact(url: string, id: number): Observable < any > {
  45. const newurl = `${url}?id=${id}`; // DELETE api/contact?id=42
  46. return this.http.delete(newurl, httpOptions).pipe(catchError(this.handleError));
  47. }
  48. // custom handler
  49. private handleError(error: HttpErrorResponse) {
  50. if (error.error instanceof ErrorEvent) {
  51. // A client-side or network error occurred. Handle it accordingly.
  52. console.error('An error occurred:', error.error.message);
  53. } else {
  54. // the backend returned an unsuccessful response code.
  55. // the response body may contain clues as to what went wrong,
  56. console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
  57. }
  58. // return an observable with a user-facing error message
  59. return throwError('Something bad happened; please try again later.');
  60. }
  61. }

Update main app html template

We have included router outlet place holder to render component based on Angular route.

  1. <!--The content below is only a placeholder and can be replaced.-->
  2. <mat-toolbar> <span>Contact Application</span> </mat-toolbar>
  3. <router-outlet></router-outlet>

Update contact form component

In contact form component, we used form group named as 'contactFrm' to bind model with each control and injected dialog data to bind form based on request parameter.

contactform.component.html
  1. <form (ngSubmit)="onSubmit(contactFrm)" [formGroup]="contactFrm">
  2. <h2>{{data.modalTitle}}</h2>
  4. <div>
  5. <mat-form-field appearance="outline">
  6. <mat-label>Name</mat-label>
  7. <input matInput placeholder="Name" formControlName="name">
  8. <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
  9. <!-- <mat-hint>Hint</mat-hint> -->
  10. <mat-error *ngIf="formErrors.name">
  11. {{ formErrors.name }}
  12. </mat-error>
  13. </mat-form-field>
  14. </div>
  15. <div>
  16. <mat-form-field appearance="outline">
  17. <mat-label>Email</mat-label>
  18. <input type="email" matInput placeholder="email" formControlName="email">
  19. <mat-error *ngIf="formErrors.email">
  20. {{ formErrors.email }}
  21. </mat-error>
  22. </mat-form-field>
  24. </div>
  25. <p>
  26. <mat-radio-group class="contact-radio-group" formControlName="gender" >
  27. <mat-radio-button class="contact-radio-button" *ngFor="let gndr of genders" [value]="gndr.id">
  28. {{ gndr.name }}
  29. </mat-radio-button>
  30. </mat-radio-group>
  31. <mat-error *ngIf="formErrors.gender">
  32. {{ formErrors.gender }}
  33. </mat-error>
  34. </p>
  35. <div>
  36. <mat-form-field appearance="outline">
  37. <input matInput [matDatepicker]="picker" placeholder="Choose a birthday" formControlName="birth">
  38. <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  39. <mat-datepicker #picker></mat-datepicker>
  41. <mat-error *ngIf="formErrors.birth ">
  42. {{ formErrors.birth }}
  43. </mat-error>
  44. </mat-form-field>
  45. </div>
  46. <div>
  47. <mat-form-field appearance="outline">
  48. <mat-select placeholder="Select a Technology" formControlName="techno">
  49. <mat-option>-- None --</mat-option>
  50. <mat-option *ngFor="let techno of technologies" [value]="techno">
  51. {{ techno }}
  52. </mat-option>
  53. </mat-select>
  54. <mat-error *ngIf="formErrors.techno ">
  55. {{ formErrors.techno }}
  56. </mat-error>
  57. </mat-form-field>
  58. </div>
  59. <div>
  60. <mat-form-field appearance="outline">
  61. <textarea matInput placeholder="Message..." formControlName="message"></textarea>
  62. <mat-error *ngIf="formErrors.message ">
  63. {{ formErrors.message }}
  64. </mat-error>
  65. </mat-form-field>
  66. </div>
  67. <div>
  69. <button type="button" mat-raised-button color="warn" (click)="dialogRef.close()">Cancel</button>
  70. <button type="submit" mat-raised-button color="primary" [disabled]="contactFrm.invalid">{{data.modalBtnTitle}}</button>
  71. </div>
  73. </form>
To see contactform.component.ts code please refer this GitHub link and final form looks as shown in the below screenshot,
Update contact list component
In contact list component, we have used material table to bind contact record using ‘MatTableDataSource’ and called contact service to retrieve data from API. Then we used MatDialog to open contact form component.
contactlist.component.html
  1. <div class="spinner" *ngIf="loadingState; else contactlist">
  2. <mat-spinner></mat-spinner>
  3. </div>
  4. <ng-template class="contactlist" #contactlist>
  5. <h2 style="text-align: center;">Contact List</h2>
  6. <div class="contactlist-container mat-elevation-z8">
  7. <div><button title="Create" mat-raised-button color="accent" (click)="addContact()">Create</button></div>
  8. <table mat-table #table [dataSource]="dataSource">
  10. <!-- Id Column -->
  11. <!-- <ng-container matColumnDef="id">
  12. <th mat-header-cell *matHeaderCellDef> Id </th>
  13. <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  14. </ng-container> -->
  16. <!-- Name Column -->
  17. <ng-container matColumnDef="name">
  18. <th mat-header-cell *matHeaderCellDef> Name </th>
  19. <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  20. </ng-container>
  22. <!-- Email Column -->
  23. <ng-container matColumnDef="email">
  24. <th mat-header-cell *matHeaderCellDef> Email </th>
  25. <td mat-cell *matCellDef="let element"> {{element.email}} </td>
  26. </ng-container>
  28. <!-- Gender Column -->
  29. <ng-container matColumnDef="gender">
  30. <th mat-header-cell *matHeaderCellDef> Gender </th>
  31. <td mat-cell *matCellDef="let element"> {{getGender(element.gender)}} </td>
  32. </ng-container>
  34. <!-- Birth Column -->
  35. <ng-container matColumnDef="birth">
  36. <th mat-header-cell *matHeaderCellDef> Birthday </th>
  37. <td mat-cell *matCellDef="let element"> {{element.birth | date: 'MM-dd-yyyy' }} </td>
  38. </ng-container>
  40. <!-- Technology Column -->
  41. <ng-container matColumnDef="techno">
  42. <th mat-header-cell *matHeaderCellDef> Technology </th>
  43. <td mat-cell *matCellDef="let element"> {{element.techno}} </td>
  44. </ng-container>
  46. <!-- Message Column -->
  47. <ng-container matColumnDef="message">
  48. <th mat-header-cell *matHeaderCellDef> Message </th>
  49. <td mat-cell *matCellDef="let element"> {{element.message}} </td>
  50. </ng-container>
  52. <ng-container matColumnDef="action">
  53. <th mat-header-cell *matHeaderCellDef> Action </th>
  54. <td mat-cell *matCellDef="let element">
  55. <button title="Edit" mat-raised-button color="primary" (click)="editContact(element.id)">Edit</button>
  56. <button title="Delete" mat-raised-button color="warn" (click)="deleteContact(element.id)">Delete</button>
  57. </td>
  58. </ng-container>
  60. <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  61. <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  62. </table>
  64. </div>
  65. </ng-template>
To see contactlist.component.ts code please refer to this GitHub link.

Build components and run the project

Our component is ready. Now build Angular project using 'ng build' command and then run the project by entering 'dotnet run' command in terminal.

Conclusion

This is how we created contact application using ASP.Net Core Web API, Angular 6.0, and Visual Studio code.

You can see the entire code on GitHub and fork it for the starter project.

Please let me know your feedback.