Exercise 4 Angular Services and Rxjs

Exercise 4 Angular App with Services, DI and RxJS

Goals

In the exercise we are going to practice our skills in creating services:

• Practice using the Dependency Injection mechanism
• Practice using promises
• Practice writing stateful services using subjects
• Practice using the async pipe
• Practice using RxJS operators

Overview

The application we will write calculates all the arithmetic operations on 2 operands. It will allow the user to enter 2 values, and then calculate their sum, difference, and product. But it will do it reactively

• On the screen you will have a place where the user can enter 2 values: a and b. Use <input type="number"> elements to allow the user to enter the values
• Under the button, after the button is clicked, we should be able to see the sum, difference and product of a and b. For example if the user enters 5, 8, the screen should say:
  • 5 + 8 = 13
  • 5 - 8 = -3
  • 5 * 8 = 40
• We will only allow integer values betweem 1 and 99, otherwise the value is considered invalid
• When either value is invalid it will be marked with a red border
• When either value is invalid - the results panel will not appear

Step 1 - Skeleton

• Create an angular application using the angular cli
• Open VsCode on the new project
• Run ng serve and browse to localhost:4200 to see the default page
• Delete all the html from app.component.html and replace it with a "Hello World" message, save, go back to the browser and see that the page is displayed.

Step 2 - State Service

• Add a service that holds 2 behavior subjects, one for each numeric item (a and b)
• Expose the behavior subjects as observables so that use can read the value of a and of b only as observables
• Expose a method to set the current value of a and another method to set the current value of b
  • Do not forget to update the observable when you change the value
• Expose a method that returns an Observable<boolean> that tells if a is currently valid
  • Do the same for B
  • expose another method that returns an Observable<boolean> that tells if a and b are both valid

Step 3 - Calculations Service

• Add another "stateless" service that exposes calculation methods
  • add(a: number, b: number): Promise<number>
  • subtract(a: number, b: number): Promise<number>
  • multiply(a: number, b: number): Promise<number>
• Make sure each method is delayed by a certain amount of time asynchronously

Step 4 - Editor Component

• Build the a view. That allows to enter the values of A and B. Use 2 inputs of type number
• Inject the state service into the component
• When the inputs change, update the state service accordingly
• Consume the isAValid and isBValid observables form the state service and use them to add a red border around each input when the value is not valid

Step 5 - Calculations component

• Build the view that allows to present the sum, difference and product of a and b
• Inject the State service and consume the values of a and b as observables
• Inject also the calculation service
• Using the calculation service, and the correct set of operatorsm build an observables from the current sum, difference and product of a and b
• Consume the isAllValid observable from the state service, and use it to condition wether any result is presented at all
• Implement the HTML and bind the values properly

Good Luck 💯