Category Archives: CS-343

UML, U of what?

What’s UML? Go ahead look it up, I’ll wait. No, not UMass Lowell it’s Unified Modeling Language. The current UML Standard, 2.0, has been around since 2005. With 14 different diagram standards UML allows individuals to work at a much higher level of abstraction. I’m familiar with UML from creating ERD diagrams while doing RDBMS work. As a developer it allows me to write pseudo-code quicker, cleaner and platform independent. From a developers stand point, let’s take a look at an example and break it down. I found the example below at https://medium.com/@smagid_allThings/uml-class-diagrams-tutorial-step-by-step-520fd83b300b I really enjoy the content at Medium.com, the articles, reviews and tutorials are all helpful and well written. This is a typical Class diagram representing 4 classes: Animal, Duck, Fish, Zebra. Notice how each of the four blocks are structured the same. Let’s focus on the Animal block. In the upper box notice that Animal is written with a bold font. This indicates that Animal is a concrete class. Abstract classes would be italicized. The next box down is where you define attributes. Public attributes are denoted using a + while private attributes use a -. Looking at our example this would translate into JAVA like this: public Int age; public String gender; The lower box is for methods or functions. The same convention is used for dentoing public or private methods. In the Animal class the example would translate to: public isMammal(){ }; public mate(){ }; Note the example is missing the return types for methods. The convention is to follow the paranthesis with a colon and list the return type. In our example isMammal would be +isMammal () : boolean Relationships between the classes are denoted using lines, arrows and diamonds. In our example the solid line with the white filled arrow indicates inheritance. The article/tutorial above has a great png showing the different relationship lines. The number of online resources for information related to drawing UML diagrams is staggering. For more information and to take a deeper dive into UML go to the source and check it out https://www.uml.org #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Angular CDK and Popover

With CS 343’s final project beginning, I have looked into some ways of displaying data. For this week, I will focus on Angular’s CDK. In Netanel Basal’s article “Creating Powerful Components with Angular CDK,” Basal describes the process of making an overlay in angular. He starts with creating a Popover service, Popover being a component from the CDK. This component is used for creating popup overlays, such as info that pops up while the mouse is hovering over something. Basal then creates the PopoverRef and its Injector. The PopoverRef is then injected into a ComponentPortal which is then attached the origin page. Portals dynamically render UI to the page. For the portal, the author creates a custom component to receive the contents to be displayed and how to render them. The article then covers three types of content the PopoverComponent can receive: text, template, and component. With that, the article’s example is completed. Now let us get a little more in-depth.

Let’s start with the Popover service. This service creates an
open() method that creates the overlay, its contents, and its injector. This
service is injected into the Popover component, where the open() method is
utilized in a show() method in the app component that is called on when a
button is clicked in the root component HTML. From what I understand, this
service handles the creation of all the parts needed to make the popover with an
open() method.

Next up is the PopoverRef, a class that receives a
overlayRef, content, and data, and creates a close() method to dispose of the
overlay. It seems that this class is used for the storage of the parent
overlay, the content, and the data, and the close() method that removes the popover.

Since Basal wanted to use a custom component, he needed to
create an Injector for it. The injector is created in the Popover service in a
createInjector() method, which converts the custom injector to a PortalInjector.

The author then attaches the soon-to-be-created Popover
component to the overlayRef in the popover service. This is done by overlayRef’s
attach() method, where a new ComponentPortal containing the PopoverComponent is
attached to the overlayRef.

The Popover component’s job is simple, just to inject the
popoverRef and render its contents. This article’s example provides multiple
rendering methods depending on content type. The three content types being template,
component, and text.

For all three types, a show() method is added to app
component that injects PopoverComponent and creates a Popover from popover service.
The only difference between the content type’s show() is what the content in
Popover is set to. This method is called on in the app component’s HTML where
it is attached to a button.

Reading through this article and examining its code has helped me towards learning how to create popup overlays. I feel I have a more solid grasp of how angular components interact with each other. I will undoubtedly use knowledge I gained from the article, “Creating Powerful Components with Angular CDK” by Netanel Basal, in my final project.

Article Referenced:
https://netbasal.com/creating-powerful-components-with-angular-cdk-2cef53d81cea

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.

FPL&S 2: Uploading Files Through an API

I must say, this project has gotten much more complicated than I was expecting, even last week. Not difficult necessarily, but requiring much more knowledge of the framework that I expected. But after a steep hill over the course of the week, the good news is the features of Angular are much more powerful and exciting than I had thought. While the project specification requires communication with a REST API, which will be used for the database, I also require remote file storage. Since I will be using Google Firebase for both of these services, and file storage has a much simpler API which I’d prefer to use with mobile, I opted to not use the REST API for file storage.

Understanding the Firebase Storage API was the first step, but after reading through much of Google’s documentation for the web API, I still had difficulty translating everything to Angular and TypeScript. But luckily, Google is kind of a big deal these days, so David East from Angular posted a short tutorial that helped me bridge the gap.

The most mindblowing portion of completing this task was the concept of an async pipe, which I will explain shortly. You can’t get through a CS degree without learning and performing asynchronous tasks, but this syntax was completely alien to me. Take this HTML from David East’s post:

<label for="file">File:</label>
<input type="file" (change)="upload($event)" accept=".png,.jpg" />

This demonstrates Angular’s ability of event binding. The (change) syntax is binding a change in input to the upload() method in the Component, while also passing the event DOM, from which you can get the File using TypeScript. My needs were a bit different, but this same syntax can be used to simply store the file when the input is changed. Then, a separate upload button’s (click) event can trigger an upload within in the Component:

<button class="btn" (click)="submit()">Upload</button>

From there, my Component uses Typescript to communicate with the AngularFireStorage service, and even update a progress bar. This is where the async pipe comes in:

<progress max="100" [value]="(uploadProgress | async)"></progress>

More binding! This time, we’re using square brackets to bind the value property of the HTML progress tag to an Observable<number> object, which we can get within the Component from the AngularFireStorage service. This Observable will update the progress bar as the file uploads if we pipe it through an async task, as shown above. This subscribes to the Observable (or Promise) and automatically unsubscribes when the Component is destroyed.

I highly recommend reading over Angular’s template syntax documentation to get better acquainted with these concepts.

After completing this portion of the project, I’ve determined I’ve been thinking too much in terms of JavaScript, because I’ve found some of TypeScript’s rules to be a hindrance. Some of the examples noted above have shown me that if I get back to an object-oriented, strongly-typed mindset, I will be able to work quicker on future tasks. Essentially, this is just a matter of getting practice with a new language and framework.

From the blog CS@Worcester – Inquiries and Queries by ausausdauer and used with permission of the author. All other rights reserved by the author.

Part 3: Setting up your first Angular 8 project

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Get All Employee

  • Employee id:{{employee.id}}
    Employee Name:{{employee.employee_name}}
    Employee Salary: {{employee.employee_salary}}
    Employee Age: {{employee.employee_age}}
  • {{error.error}}

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Select an action

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Part 3: Setting up your first Angular 8 project

…and we’re back! Last week we created the get-all-employees component and the employee class. This week we’ll finish up by modifying: get-all-employees.component.html app.component.html app.modules.ts app.component.ts Before we move on open up the get-all-employees.component.ts and make sure you have an import statement for the Employee class up top. It should look like this: import {Employee} from ‘../employee’; If it’s not there please add it. Ok now moving right along… Once we touch up these four files you’ll have a working RestAPI Get call on your page. So let’s get to it and wrap this up! Open the get-all-employees.component.html – this defines how each employee is displayed. Modify using this code:

Get All Employee

  • Employee id:{{employee.id}}
    Employee Name:{{employee.employee_name}}
    Employee Salary: {{employee.employee_salary}}
    Employee Age: {{employee.employee_age}}
  • {{error.error}}

Let’s break down what we did here. We created a small form that has a button and two lists. The button, when clicked, calls our getAllEmployee() method which populates our employees Array. We handle populating the employee list on screen by using *ngFor, this is Angulars handly little for loop. *ngFor loops through the employees Array and returns each employee as a separate list item filling out the list. The *ngIf will only display IF an error is received. Now let’s look at the app.component.html now. Use this code to complete it:

Select an action

Here’s what we are doing in the app.component.html. Take a look at this line first: I’m defining the radio button as an add button and setting the appsection value to 1. When the radio button is selected the appsection==1 which we use further down to display the app-get-all-employees in this section:

This is a handy little trick because we can define multiple appsections and using *ngIf display only the desired app. For example let’s say we have another app component called app-get-employee that returns a single employee. We could setup a second radio button and have it assign “2” to appsection. Then we would setup a second *ngIf for appsection==2 just like we setup appsection==1 except passing in the component like this: In this manner we can build out an entire site as a single page app. It would be all action driven, reactive and fluid. It’s a great time to be playing on the web! O.k. moving right along now… open up the app.module.ts and modify it to include an import and a declaration for GetAllEmployeesComponent. The import statement will look like this: import { GetAllEmployeesComponent } from ‘./get-all-employees/get-all-employees.component’; and you want to append this to the list of declarations in @NgModule: GetAllEmployeesComponent, Save your work and let’s move on to the app.component.ts all we need to do here is an import statement for the Employee class: import {Employee} from ‘./employee’; Ok now save all your work and launch the angular site. Hit that radio button, now click the Get all Employees button. BOOM a screenful of employees! So in these last two posts I showed you how to setup a basic API call to an existing test API site. We also learned how to use appsection to load components on a page. Now go make it pretty and add more functionality. This article is just over a year old but it has great tips and tricks for working with TypeScript and Angular. #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Understanding Angular with Tetris

For this week’s post I read through Michael Karén’s article, “Game Development: Tetris in Angular.” As the name suggests, this article demonstrates how to make a Tetris game in Angular. This is a great example project that shows many of Angular’s functionalities without being too complex. It covers topics introduced in CS 343: components and templates, and other topics like styles and event listeners. The author’s project code can be viewed on GitHub for further examination.

The project contains three components (with @Component
decorator): app, board, and piece. The app component is the main component that
uses the board component as a template. The board component handles the board
UI and injects the game logic from GameService. And lastly, the piece component
handles the UI and properties of the Tetris pieces.

Templates are used in two ways in Karén’s game. The app-root
which uses another component as its template by using the custom tag
<game-board></game-board>. The game-board uses a URL as a template,
which is defined in the board component’s HTML file. This HTML file defines how
both game-board and, by extension, app-root are rendered on the page.

The injectable class (with @Injectable decorator)
game.service contains much of the game logic. As an injectable, game.service’s
methods are accessible to board.component when game.service is injected in
board.component, located at the example code’s line 72 with “constructor(private
service: GameService) {}.” This is useful as it is cleaner to separate the responsibility
of the game logic and the UI logic from each other.

The styles are defined in a Cascading Style Sheet or CSS file.
The CSS file is used to define how some of the HTML elements are designed. CSS makes
HTML design simpler with its more intuitive interface.

I learned a new decorator from this article, @HostListener.
This decorator can be used to define the program’s response to user
interaction. In this article’s project uses @HostListener to define how the game
board responds to the specified keystrokes.

The JSON methods stringify and parse were also new to me. JSON.stringify will convert an object into a string. JSON.parse on the other hand, converts a string into a JSON object.

Reading through this article and examining the project’s
code has helped my understanding of Angular and HTML tremendously. I recommend Michael
Karén’s article, “Game Development: Tetris in Angular,” to those who are
looking for a fun example of an Angular program.  Being able to see all the parts of the
program and how they work together has made Angular more accessible for me and
has provided an excellent resource for possible projects in the future.

Article referenced:
https://blog.angularindepth.com/game-development-tetris-in-angular-64ef96ce56f7

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.

Angular Components

This past week, I began to work with REST API frontend code
using the Angular framework in CS-343. The introductory class activity taught
the basics about setting up and working with an Angular project as well as some
useful properties of Angular (such as *ngIf) that I definitely see myself using
in the future. However, the activity did not go into much detail about how to
create and manipulate Angular components to create more interesting UIs. While
researching Angular on my own, I came across a blog post from Angular
University titled “Angular Components – The Fundamentals.”

The blog can be found here:

https://blog.angular-university.io/introduction-to-angular-2-fundamentals-of-components-events-properties-and-actions/

As someone who has enjoyed creating UIs in Java using Swing
components, this blog immediately caught my attention. I expected it to help me
create UIs for server-based applications that would be more interesting than
the basic layout I worked with in class. However, while this blog did not go
into too much detail on the creation of UIs, it has certainly helped me to
better understand the fundamental properties of Angular components. The information
I learned from this blog will undoubtedly be useful as I begin to work more
in-depth with Angular components in my final project for CS-343. I decided to
share this blog because I think that others who are new to Angular will also find
it to be a useful introduction to Angular components.

The blog starts by providing a basic introduction to Angular components, as well as browser components in general, using short example code. It then discusses in detail the two main aspects of an angular component, properties and events, and explains when to use them and when to avoid using them. I think the blog did a great job explaining properties and events in simple terms and clearly stating when not to use them. I especially liked how the blog links properties and events to input and output, respectively. This association helped me understand when to make use of properties and events in Angular projects, since I already have experience working with input and output of components in Java. I also think the example code in this blog is simple enough that it can easily be referenced while working on other projects. I certainly see myself referring back to these examples as I start working with Angular components on my own to help myself understand the correct syntax for implementing properties and events. Finally, this blog has demonstrated to me how to create familiar components, such as a scrollable list, and it has taught me how to change aspects of components, such as their color. The information in this blog has helped me understand the fundamentals of Angular components and how to work with them in applications. I will certainly be referring back to this post as I begin to work on my final project this week, as it is a great resource to help new Angular developers to understand Angular components.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

FPL&S 1: Getting to Know Angular

For my final project in my software construction and architecture class, I will be writing a 5-post series for Final Project Learning and Status (FPL&S). This project will be using Angular, Typescript, and Node Package Manager (npm). I am not familiar with these tools, but I have learned my lesson before that one should fully understand the technologies they’re using before they start a project. I have spent about 10 hours this week tinkering with Angular, reading blogs, watching tutorials, and of course referencing Angular documentation, with the goal of understanding the architecture as a whole.

My first question: why did I have to download Node.js? The answer boils down to requiring npm, which is packaged with Node.js. Npm allows users to share packages, and Angular requires quite a few packages to run. Npm takes care of this. Of course, it also installed Angular itself.

I was also confused about which files were doing what in a pre-configured project, but after playing with the code and making modifications, this started becoming second-nature, so I won’t go into detail on that. However, learning the concepts behind each file was much more important.

Traversy Media released an Angular Crash Course video which I found to be quite comprehensive and helpful in understanding the framework as a whole. Many of these concepts were learned in practice, but it is nice to be explicitly told some things to remove doubt. The video described how UI “Components” are used and built. Particularly useful were the descriptions of using a constructor to import services that will be used, and that selector was defining the tag to be used in HTML.

Modules, called NgModules, are another important concept, central to Angular. In a single-page web app you might only have a single NgModule, but in larger systems they help improve the modularity of an application, just as modules in Java or other languages. A single NgModule, however, can have many Components. Components can also be reused and nested, but should be considered a view, the goal of which is to create a user experience.

My final project will tie in with my independent study Android app next semester. My first idea was to implement audio recording that will also be necessary for my mobile app, but this turned into a much bigger challenge than expected. Due to the nature of my mobile app, I feel it will be better to start with a web front-end that can pull from data already stored in a cloud database, in order to display metrics, charts and a summary of results. Learning about Angular Observables will likely help to perform asynchronous uploading.

I’ve learned much more than what I’ve written up here, but this blog post addresses what I feel was most relevant to my project and learning Angular. Since this blog is documenting learning experiences, I welcome comments, corrections, and suggestions if anyone thinks it will help.

From the blog CS@Worcester – Inquiries and Queries by ausausdauer and used with permission of the author. All other rights reserved by the author.

Part 2: Setting up your first Angular 8 project

Did you do that Angular tut I provided in my last post? Pretty easy to get up and running. I did the whole Tour of Heroes tutorial over the summer so I could have a solid understanding of where I was at with it. It’s flexible and somewhat intuitive. Ready to kick your Angular skills up a notch? Let’s create a component that does an API call that returns a list of all employee’s. We’ll code this against a working online example that’s hosted at dummy.restapiexample.com I’m making a couple of assumptions here. First that you actually did the earlier tutorial and second that you understand how API’s work and lastly that you have an Angular site you are currently working on. If you’re not sure about Rest API’s read this article on Sitepoint then jump back in. Ok if you’re working with a very basic Angular site let’s open it in your favorite IDE. I like using Webstorm as it has some neat built ins. In Webstorm I’ll click in the lower toolbar and launch a terminal session in the root of my project folder. To create the new component I’ll type in: ng g component getAllEmployees Since you’re here go ahead and create an employee class: ng g class employee This will create a new Angular component named get-all-employees and will also create an employee class file in the root of your project. If you check out your projects file structure you’ll see a new folder named get-all-employees in the app folder. Browse that new folder and you’ll see that Angular created the .css .html .spce.ts and component.ts for your new component. Now let’s get to the fun part, the coding. Open the employee.ts in the root folder and modify it like this: export class Employee { id: number; employee_name: string; employee_salary: number; employee_age: number; constructor(id: number, employee_name: string, employee_salary: number, employee_age: number) { this.id = id; this.employee_name = employee_name; this.employee_salary = employee_salary; this.employee_age = employee_age; } } Ignore my formatting please as my blog interface makes it wonky. By using an Employee class we can import the JSON response objects into an array of employee objects. Save the employee.ts and open up the get-all-employees.component.ts we’ll modify this to use the employee.ts and create the methods to pass the GET request to pull in all the employees: import { Component, OnInit } from ‘@angular/core’; import {Employee} from ‘../employee’; import {HttpClient, HttpErrorResponse} from ‘@angular/common/http’; @Component({ selector: ‘app-get-all-employees’, templateUrl: ‘./get-all-employees.component.html’, styleUrls: [‘./get-all-employees.component.css’] }) export class GetAllEmployeesComponent implements OnInit { employees: Employee[] = [Object]; error: HttpErrorResponse = null; constructor(private http: HttpClient) { } ngOnInit() { } getAllEmployees(): void { this.error = null; this.http.get(‘http://dummy.restapiexample.com/api/v1/employees’ ) .subscribe(response => { this.employees = response; console.log(response); }); } } Let’s break down what we are doing here. The imports should be self-explanatory but just in case… The (Component, OnInit) are Angular core components technically since we aren’t using the ngOnInit method we really don’t need it and could remove it from this component. We import Employee so we can create an array of Employee objects. The HttpClient and HttpErrorResponse are imported because we are going to be making an http call and may have to handle an error response. The @Component section defines the get-all-employees component. Now lets look at the class, we create the empty employees array of object type Employee. We set a HttpErrorResponse named error to null and we call our constructor to create a private http client. The getAllEmployees method is the where the magic happens. It takes the JSON response and maps each entry as an Employee object in the employees array. Ok next week we will finish this up by modifying app.modules.ts, get-all-customers.component.html, app.component.html and app.component.ts Until then – Happy Coding! #CS@Worcester #CS343

From the blog Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.

Part 2: Setting up your first Angular 8 project

Did you do that Angular tut I provided in my last post? Pretty easy to get up and running. I did the whole Tour of Heroes tutorial over the summer so I could have a solid understanding of where I was at with it. It’s flexible and somewhat intuitive. Ready to kick your Angular skills up a notch? Let’s create a component that does an API call that returns a list of all employee’s. We’ll code this against a working online example that’s hosted at dummy.restapiexample.com I’m making a couple of assumptions here. First that you actually did the earlier tutorial and second that you understand how API’s work and lastly that you have an Angular site you are currently working on. If you’re not sure about Rest API’s read this article on Sitepoint then jump back in. Ok if you’re working with a very basic Angular site let’s open it in your favorite IDE. I like using Webstorm as it has some neat built ins. In Webstorm I’ll click in the lower toolbar and launch a terminal session in the root of my project folder. To create the new component I’ll type in: ng g component getAllEmployees Since you’re here go ahead and create an employee class: ng g class employee This will create a new Angular component named get-all-employees and will also create an employee class file in the root of your project. If you check out your projects file structure you’ll see a new folder named get-all-employees in the app folder. Browse that new folder and you’ll see that Angular created the .css .html .spce.ts and component.ts for your new component. Now let’s get to the fun part, the coding. Open the employee.ts in the root folder and modify it like this: export class Employee { id: number; employee_name: string; employee_salary: number; employee_age: number; constructor(id: number, employee_name: string, employee_salary: number, employee_age: number) { this.id = id; this.employee_name = employee_name; this.employee_salary = employee_salary; this.employee_age = employee_age; } } Ignore my formatting please as my blog interface makes it wonky. By using an Employee class we can import the JSON response objects into an array of employee objects. Save the employee.ts and open up the get-all-employees.component.ts we’ll modify this to use the employee.ts and create the methods to pass the GET request to pull in all the employees: import { Component, OnInit } from ‘@angular/core’; import {Employee} from ‘../employee’; import {HttpClient, HttpErrorResponse} from ‘@angular/common/http’; @Component({ selector: ‘app-get-all-employees’, templateUrl: ‘./get-all-employees.component.html’, styleUrls: [‘./get-all-employees.component.css’] }) export class GetAllEmployeesComponent implements OnInit { employees: Employee[] = [Object]; error: HttpErrorResponse = null; constructor(private http: HttpClient) { } ngOnInit() { } getAllEmployees(): void { this.error = null; this.http.get(‘http://dummy.restapiexample.com/api/v1/employees’ ) .subscribe(response => { this.employees = response; console.log(response); }); } } Let’s break down what we are doing here. The imports should be self-explanatory but just in case… The (Component, OnInit) are Angular core components technically since we aren’t using the ngOnInit method we really don’t need it and could remove it from this component. We import Employee so we can create an array of Employee objects. The HttpClient and HttpErrorResponse are imported because we are going to be making an http call and may have to handle an error response. The @Component section defines the get-all-employees component. Now lets look at the class, we create the empty employees array of object type Employee. We set a HttpErrorResponse named error to null and we call our constructor to create a private http client. The getAllEmployees method is the where the magic happens. It takes the JSON response and maps each entry as an Employee object in the employees array. Ok next week we will finish this up by modifying app.modules.ts, get-all-customers.component.html, app.component.html and app.component.ts Until then – Happy Coding! #CS@Worcester #CS343

From the blog Home | Michael Duquette by Michael Duquette and used with permission of the author. All other rights reserved by the author.