Prompt Title: Could you please code me a calculator application using Angular framework with bootstrap 5?

Certainly! Here's an example of a calculator application using Angular framework and Bootstrap 5:

First, make sure you have Angular CLI installed. If not, you can install it globally by running the following command:

bashCopy code
npm install -g @angular/cli

Then, follow these steps to create the calculator application:

Step 1: Create a new Angular project

arduinoCopy code
ng new calculator-app

Step 2: Navigate to the project folder

bashCopy code
cd calculator-app

Step 3: Install Bootstrap 5

Copy code
npm install bootstrap

Step 4: Open the "angular.json" file and add the following line under "styles" array:

jsonCopy code
"node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 5: Create a new component for the calculator

Copy code
ng generate component calculator

Step 6: Open the newly created component file "calculator.component.ts" and replace its content with the following code:

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent {
  result: number = 0;
  num1: number;
  num2: number;

  add(): void {
    this.result = this.num1 + this.num2;
  }

  subtract(): void {
    this.result = this.num1 - this.num2;
  }

  multiply(): void {
    this.result = this.num1 * this.num2;
  }

  divide(): void {
    if (this.num2 !== 0) {
      this.result = this.num1 / this.num2;
    } else {
      this.result = NaN; // Handle division by zero error
    }
  }
}

Step 7: Open the template file "calculator.component.html" and replace its content with the following code:

htmlCopy code
<div class="container">
  <h2 class="mt-3">Calculator</h2>
  <div class="row mt-3">
    <div class="col">
      <label for="num1" class="form-label">Number 1:</label>
      <input type="number" [(ngModel)]="num1" id="num1" class="form-control">
    </div>
    <div class="col">
      <label for="num2" class="form-label">Number 2:</label>
      <input type="number" [(ngModel)]="num2" id="num2" class="form-control">
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <button (click)="add()" class="btn btn-primary">Add</button>
    </div>
    <div class="col">
      <button (click)="subtract()" class="btn btn-primary">Subtract</button>
    </div>
    <div class="col">
      <button (click)="multiply()" class="btn btn-primary">Multiply</button>
    </div>
    <div class="col">
      <button (click)="divide()" class="btn btn-primary">Divide</button>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col">
      <p class="lead">Result: {{ result }}</p>
    </div>
  </div>
</div>

Step 8: Open the CSS file "calculator.component.css" and add any desired styling.

Step 9: Open the main Angular component file "app.component.html" and replace its content with the following code:

htmlCopy code
<div style