Exercise: Angular part 2

Idea: Introduction to Angular (component, bindings).
Background: The Ultimate Angular-cli Reference and Angular.io

In this exercise you have to build a simple calculator in 10 steps

Step 1 - Create a new Angular project - SimpleCalculator
Open VSCode.
Open your Angular folder (File -> Open Folder)
Open an integrated terminal window in VSCode (View -> Integrated Terminal)
Create a new project by running: ng new SimpleCalculator in the terminal window.

? Would you like to add Angular routing? Type 'N' - we don't need routing yet!
? Whitch stylesheet format would you like to use? Type return (just select 'CSS')


Step 2 - Add Bootsrap to your project
Open the index.html file and add Bootstrap 4 (not 5) to your SimpleCalculator project by adding the following lines in the header:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

Step 3 - Add a Jumbotron to the component.html file
Open app.component.html and replace the default html code with the following code:

Step 4 - Run the server
Navigate to the new project folder by running: cd SimpleCalculator
Verify that the application works by running: ng serve -o (-o opens and browse your application in your default Browser)

Verify that you get something like this:

After verification - stop the Server with: Ctrl + c

Step 5 - Create a new component
Create a new component Calculator by running: ng generate component Calculator (or just: ng g c Calculator)

Notice: The import of 'CalculatorComponent' and the declarations of 'CalculatorComponent' in @NgModule
'Component' is automatically appended to the name of the component.



Step 6 - Implement the CalculatorComponent class in calculator.component.ts
The class should have 3 properties: number1, number2 and result (all of the type number) and 4 functions Add( ), Sub( ), Mul( ) and Div( ) that uses number1 and number2 to calculate and update result.
(The lifecycle-hook: ngOnInit can be removed - it's not used in this case)

export class CalculatorComponent {

  number1: number;

  number2: number;

  result: number;

  constructor() {

    this.number1 = 0;

    this.number2 = 0;

    this.result = 0;

  }

  Add() { this.result = this.number1 + this.number2; }

  Sub() { this.result = this.number1 - this.number2; }

  Mul() { this.result = this.number1 * this.number2; }

  Div() { this.result = this.number1 / this.number2; }

}

 

Step 7a - Add import of the FormsModule in app.module.ts
To use input-fields in our app we have to import the FormsModule. Open the app.module.ts file - add the import { FormsModule } from '@angular/forms'; statement and add FormsModule in list of the imports property:

Step 7b - Create the template to the new component (calculator.component.html)
Add to input-fields of the type "number" and make a two-way binding between the input-fields and the number-properties in the component class (used to update the view-model from the view (the template)).
Hint: [(ngModel)]="Property".
Use interpolation {{ }} to make a one way binding from the result-property in the component and the DOM (in the template of the component)
Use event-binding to bind the functions (Add, Sub, Mul and Div) to the click-event on the buttons
Use Bootstraps grid-system to layout the component.:

<div class="row">

    <div class="col-1"></div>

    <div class="col-4" id="calc">

      <h1>Simple Calculator</h1>CalculatorComponent (Child-component to AppComponent)<br><br><br>

      Number1:<input type=number [(ngModel)]="number1" id="x"><br><br>

      Number2:<input type=number [(ngModel)]="number2" id="y"><br><br>

      Result: {{result}}<br><br>

      <button (click)="Add()">ADD</button>

      <button (click)="Sub()">SUB</button>

      <button (click)="Mul()">MUL</button>

      <button (click)="Div()">DIV</button>

    </div>

    <div class="col-8"></div>

</div>

 

Step 8 Add child-component to the parent-component (RootComponent)
Insert <app-calculator> Loading ... </app-calculator> in the app.component.html file:

<div class="jumbotron">

  <h1>Angular SimpleCalculator</h1>

  <p>RootComponent</p>

</div>

<app-calculator>Loading ...</app-calculator>

Step 9 - Styling the CalculatorComponent
Add some styling to calculator.component.css file, like:

#calc{

    background-color: black;

    color: white;

    border: 2px solid white;

    padding-bottom: 20px;

    padding-left: 20px;

    padding-right: 20px;

}

#x,#y{

    color: black;

    margin-left: 20px;

}

button{

    color: black;

    margin-left: 20px;

}

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

Congratulation! - Angular is still rocking and you have made your second (but still very small) Angular App.

/ Henrik H