Slip 1(a) Write an Angular 13 application addition of two numbers using ng-init, ng-model & ng-bind. And also demonstrate ng-show, ng-disabled, ng-click directives on button component.

 a) ng new slip1

b) cd slip1

c) open app.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  num1: number = 0;

  num2: number = 0;

  result: number = 0;

  disableButton: boolean = false;

  showResult: boolean = false;

  add(): void {

    this.result = this.num1 + this.num2;

    this.disableButton = true;  // Disable the button after calculation

    this.showResult = true;      // Show the computed result

  }

}                                                                                        

2)app.component.html

<div>

    <h2>Add Two Numbers</h2>

    <label>

      First Number:

      <input type="number" [(ngModel)]="num1">

    </label>

    <br>

    <label>

      Second Number:

      <input type="number" [(ngModel)]="num2">

    </label>

    <br><br>

    <button (click)="add()" [disabled]="disableButton">

      Compute Sum

    </button>

    <br><br>

    <h3 *ngIf="showResult">

      Result: {{ result }}

    </h3>

</div>

3) app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Run project -

ng serve -o