How to Build a Calculator App with Angular and RxJS

Posted on by Panther

In this tutorial, we will be building a calculator app using Angular and RxJS.

Angular is a popular JavaScript framework for building web applications, and RxJS is a powerful library for reactive programming. By combining these two technologies, we can create a calculator app that updates in real-time as the user interacts with it.

Prerequisites

Before you start, make sure you have the following installed:

  • Node.js
  • Angular CLI

Step 1: Setting up the project

To start, let’s create a new Angular project. Open your terminal and run the following command:

ng new calculator-app

This will create a new Angular project with the name “calculator-app”.

Navigate to your project directory:

cd calculator-app

Now, let’s generate a new component called “calculator”:

ng generate component calculator

This command will generate a new component called “calculator” inside the “src/app” directory.

Step 2: Building the calculator UI

Open the “calculator.component.html” file and replace its contents with the following code:

<div class="calculator">
  <h1>Calculator</h1>
  <div class="result">{{ result }}</div>

  <div class="keys">
    <div class="row">
      <button (click)="addNumber(7)">7</button>
      <button (click)="addNumber(8)">8</button>
      <button (click)="addNumber(9)">9</button>
      <button (click)="divide()">/</button>
    </div>
    <div class="row">
      <button (click)="addNumber(4)">4</button>
      <button (click)="addNumber(5)">5</button>
      <button (click)="addNumber(6)">6</button>
      <button (click)="multiply()">*</button>
    </div>
    <div class="row">
      <button (click)="addNumber(1)">1</button>
      <button (click)="addNumber(2)">2</button>
      <button (click)="addNumber(3)">3</button>
      <button (click)="subtract()">-</button>
    </div>
    <div class="row">
      <button (click)="addNumber(0)">0</button>
      <button (click)="reset()">C</button>
      <button (click)="calculate()">=</button>
      <button (click)="add()">+</button>
    </div>
  </div>
</div>

In this HTML code, we have a div with the class “calculator” which contains the calculator UI. Inside the div, we have a header with the text “Calculator” and a div with the class “result” to display the result of the calculations.

Below the header and result div, we have a div with the class “keys” which contains the calculator buttons. Each row of buttons is wrapped in a div with the class “row”. Each button has a click event attached to it that calls a corresponding method defined in the component.

Step 3: Adding the calculator logic

Open the “calculator.component.ts” file and replace its contents with the following code:

import { Component } from '@angular/core';
import { Subject } from 'rxjs';
import { scan } from 'rxjs/operators';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent {

  private numbers$ = new Subject<number>();
  private operations$ = new Subject<string>();

  result = 0;

  constructor() {
    this.numbers$.pipe(
      scan((acc, curr) => acc + curr, 0)
    ).subscribe(result => {
      this.result = result;
    });

    this.operations$.pipe(
      scan((acc, curr) => curr === "=" ? this.result : acc + curr, 0)
    ).subscribe(result => {
      this.result = result;
    });
  }

  addNumber(number: number) {
    this.numbers$.next(number);
  }

  add() {
    this.operations$.next("+");
  }

  subtract() {
    this.operations$.next("-");
  }

  multiply() {
    this.operations$.next("*");
  }

  divide() {
    this.operations$.next("/");
  }

  reset() {
    this.numbers$.next(0);
  }

  calculate() {
    this.operations$.next("=");
  }

}

In this TypeScript code, we import the necessary modules from the RxJS library. We create two private Subjects: numbers$ for handling number inputs and operations$ for handling operator inputs.

Inside the constructor, we use the scan operator to perform the calculations based on the inputs received. The result of the calculations is then subscribed to and stored in the result variable, which is displayed in the UI.

We also have methods for handling number input and operator input. These methods emit the corresponding values to the Subjects, which triggers the calculations.

Step 4: Styling the calculator

Open the “calculator.component.css” file and add the following code:

.calculator {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.result {
  font-size: 24px;
  margin-bottom: 20px;
}

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  margin-bottom: 20px;
}

.row {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px;
}

This CSS code adds some basic styling to the calculator UI. The calculator is centered on the page and has a maximum width of 400px. The result is styled with a larger font size, and the buttons are arranged in a grid layout.

Step 5: Running the app

To run the calculator app, open your terminal and navigate to the project directory. Then, run the following command:

ng serve

This will start the Angular development server. Open your browser and go to http://localhost:4200 to see the calculator app in action.

Conclusion

In this tutorial, we have built a calculator app using Angular and RxJS. We have learned how to handle user input, perform calculations using the RxJS scan operator, and update the UI in real-time. With the knowledge gained from this tutorial, you can now build more advanced calculator apps or explore other possibilities with Angular and RxJS.

Related Post