Exercise: Angular part 3 (Simple Calculator refactoring)

Idea: Introduction to Angular (Services, input&output - component interaction).
Background: The Ultimate Angular-cli Reference and Angular.io

Relateret billede

In this exercise you have to refactor the "simple calculator" from previous exercises in 9 steps

Step 1 - Create a new Service
Create a new service with the name CalculatorService by running: ng g service calculation.
Notice: this will create a new fil with the name: calculation.service.ts, with a CalculationService class.

The file should looks like this:

Notice the import of "Injectable" and the class annotation with @Injectable( ).

Step 2 - Implement the CalculationService class
Implement the Add, Sub, Mul and Div functions, they should all take 2 numbers as arguments and return the result of the calculation:

Step 3 - Register the CalculatorService in app.module.ts

Add an import statement in the app.module to import the new service and register the service by adding the service to the providers in @NgModule:


Step 4 - Refactor the class CalculatorComponent (calculator.component.ts) to use the new Service
First, import the CalculationService:


Second, inject the CalculationService into the CalculatorComponent by adding the service as a parameter to the constructor:

Finnaly, refactor all the calculation functions to use the Service:

Step 5
Start the server by running: ng serve -o to watch the result. It shoud still look something like this:

Now you are ready to make a new component ResultComponent, a child-component to the CalculatorComponent.
The ResultComponent should display the result of the calculation.
In this case we have a simple direct parent-child relation between CalculatorComponent and ResultComponent.

Step 6 - Create a new component

Stop the Server if its still running (ctrl + c).
Create a new component ResultComponent by running: ng g c Result

Step 7 Add imports ...
Add imports in the file result.components.ts (import Input from angular.core and CalculatorComponent)
Add a property named result to the class ResultComponent. The property must be annotated with @Input( )

First we have to create a property 'result' in the child-component: ResultComponent.
The value to the result-property is passed in from the parent-component CalculatorComponent - so decorate the result-property with the @Input('result') annotation
and import Input from '@angular/core' :



Step 8- Move the view of the result from CalculatorComponent to ResultComponent
Hint: move "Result: {{ result }}" from calculator.component.html to result.component.html.
Make a nice styling of the new component ;-)

Insert <app-result> in the parent template: calculator.component.html (don't forget to add the property binding, so you can pass the result property value from the parent to the result property in the child-component):


Step 9
Start the server by running: ng serve -o to watch the result. It shoud look something like this:

Congratulation! - Angular is still rocking and now you have introduced Services and direct paret-child communication in your second (but still very small) Angular App.

/ Henrik H