Creating Dynamic Web Application Using Angular 8

I am going to talk about how to create front end web application using Angular 8 to consume REST Web API. I have given a blog posted on my web site title Constructing REST API using ASP.NET Core MVC 2.2 and EF Core 3.1. That shows you how to create back end tier of API. The Entity Framework Core also can use mapping to stored procedures. You can go my GitHub to see the code sample.

Angular 8 is an open-source, client-side TypeScript based JavaScript framework. It is written in TypeScript and compiled into JavaScript. It is used to create dynamic web applications and is very similar to its previous versions with some following extensive features.
• Differential loading
• Web worker support
• CLI updates
• Ivy demo

Differential loading is the most outstanding improvement delivered in this version. The feature enables the Command Line Interface (CLI) to create two different JavaScript bundles depending on the browser you are going to run your app on. Angular has web workers that enable you to offload large files (animations, videos, etc.) in background threads and keep the main thread that interacts with users free. Web workers significantly speed up the execution of CPU.

We created API Schedules Rest Service using MVC and EF Core. Let us continue to create Scheduling web site (front end) using Angular 8.

1. Preparation

First, we will install Angular CLI using this command in the terminal or Node.js command line (NodeJS Packages Manager).
npm install -g @angular/cli

Creating new Angular 8 app using Angular CLI by type this command.
ng new AngularProjects

That is default usage of the command and creating a new project folder with AngularProjects. The project will be created in that AngularProjects folder and it contains the following:
• The default Angular project
• All dependencies install in node_modules folder
• Testing files for each component.

Starting up the development web server with
ng serve

Go to the AngularProjects folder, if you like open the local site http://localhost:4200 use option open:
ng serve –open

See the following output. Press Ctrl+c to stop the web server.

Go to app.component.html, add html tag under header in main container. That is the page content for your AngularProjects.

2. Install ng-bootstrap library
Run the following command will install ng-bootstrap for the default application specified in the angular.json. You can specify the project option if you have multiple projects, and you want to target a specific project:
ng add @ng-bootstrap/ng-bootstrap – project AngularProjects

Open the angular.json file and add a line “node_modules/bootstrap/dist/css/bootstrap.min.css”
in the styles section:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],

3. Create a Feature Component
Use the Anguar CLI to generate a new component name Schedule, you can create a component folder and put the component schedule in it.
ng generate component schedule

The command will create a directory src/app/schedule. Inside the directory, four files are generated:
• Schedule.component.css
• Schedule.component.html
• Schedule.component.spec.ts
• Schedule.component.ts

We will put all REST API request in the Angular Service. Let’s create an Api.Service for my web site in the AngularProjects folder:
ng generate service services/api

Open api.service.ts file, import HttpClient:
import { HttpClient } from '@angular/common/http';

Declare a variable apiurl, a backend service Schedule built by Rest MVC .Net Core and EF Core. It is included in last post.
var apiurl = 'http://localhost:56749/api/';

Write a function to get the data from Schedule Rest API by call
http.get:getScheduleRestApi(url) {
return this.http.get(apiurl + url);
}

4. Import Libraries and Component
Open app.module.ts, import the following libraries and component:
@angular/common/http, @ng-bootstrap/ng-bootstrap if the install of ngBootstrap was specified to the other project and current project needs to use this. Also import the web site ScheduleComponent as following:

import { HttpClientModule} from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ScheduleComponent } from './Schedule/schedule/schedule.component';

Declare ScheduleComponent, and import HttpClientModule and NgbModule as following:

@NgModule({
declarations: [
AppComponent,
ScheduleComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})

5. Specify the Routes.
Import ScheduleComponent and give the route ‘getschedules’ in app-routing.module.ts file:
const routes: Routes = [
{path: 'getschedules', component: ScheduleComponent }
];

6. Call Server Side the Restful Service
Let us import ApiService and Angular Bootstrap:
import { ApiService } from '../../services/api.service';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

Pass parameters ApiService and NgbModal in the constructor.
We are going to create two major functionalities:

• Working Schedule: show each meeting attendees by click on “Show Attendees” button.
• User Schedule: show individual user schedules by click on “Show Schedule” button.

Through this coding, we can have an idea of how Angular handles master and detail data and displays the data in Html. I am going to detail on second functionality. Let us declare three are array variables and one switch in and define the following functions to get the data: user data and individual user schedules in Schedule.Component.ts. We need to import OnDestroy to avoid the memory leaking issue.

userList: any = [];
allUserScheduleList: any = [];
userScheduleByUserIdList: any[][];
public scheduleShow : boolean[] = [false];

GetUsers() {
this.apiservices.getScheduleRestApi('users').subscribe(
data => {
this.userList = data;
console.log(this.userList)
}
);
}

GetAllUserSchedules() {
this.apiservices.getScheduleRestApi('users/alluserschedules')
.subscribe(
data => {
this.allUserScheduleList = data;
console.log(this.allUserScheduleList);

if (this.userList.length>0) {
this.userScheduleByUserIdList = [];
for (let i=0; i < this.userList.length; i++){
this.userScheduleByUserIdList[i] = [];
for( let j = 0; j < this.allUserScheduleList.length; j++) {
this.userScheduleByUserIdList[i][j] = [];
if (this.allUserScheduleList[j].UserId ==
this.userList[i].Id){
this.userScheduleByUserIdList[i][j] =
this.allUserScheduleList[j];
}
}
}
console.log(this.userScheduleByUserIdList);
}
}
);
}

ToggleArea(id){
for (let index = 0; index < this.userList.length; index++) {
if (id == this.userList[index].Id) {
this.scheduleShow[index] = !this.scheduleShow[index];
break;
}
}
}

public ngOnDestroy(): void {

this.userList.unsubscribe();
this.allUserScheduleList.unsubscribe();
}

7. Display the data in the Html
Let us discuss how Angula 8 displays the data in Html. The tag *ngfor is used to loop through useList. The tag *ngif is used to show /hidden user’s schedule. Also, we use another *ngfor to loop through userScheduleByUserIdList by each UserId.
Here is the Html code.

See the screenshots of the action page. It will show individual schedules when you click on “Show Schedule” button. It will show attendees when you click on “Show Attendees” button.

Notice here popup used ngBootstrap model. We also can add more functionalities, for example, user changes schedules, call http.put service. Please follow my next post. You can go my GitHub to see the code sample.