To design a dynamic website to perform mathematical calculations using Angular Framework
Requirement collection.
Creating the layout using HTML and CSS in component.html file
Write typescript to perform the calculations.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
app.component.html
<body>
<div class="container">
<h1>Math Calculations</h1>
<div class="subcontainer">
<Rectangle-Area></Rectangle-Area>
</div>
<div class="subcontainer">
<Cylinder-Area></Cylinder-Area>
</div>
<div class="footer">
Developed by: Setty Poojitha
</div>
</div>
</body>
<router-outlet></router-outlet>
rectangle.component.html
<div>
<h2>Area of a Rectangle</h2>
Length <input type="text" [(ngModel)]="length"> Meters<br><br>
Breadth <input [(ngModel)]="breadth"type ="text">Meters<br><br>
<input type="button" (click)="onCalculate()" value="Calculate Area"><br><br>
Area is <input [value]="area" type="text" >Meter<sup>2</sup>
</div>
cylinder.component.html
<div>
<h2>Area of a Cylinder</h2>
Radius <input type="text" [(ngModel)]="radius"> Meters<br><br>
Height <input [(ngModel)]="height"type ="text">Meters<br><br>
<input type="button" (click)="onCycCalculate()" value="Calculate Area"><br><br>
Area is <input [value]="area" type="text" >Meter<sup>2</sup>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'math';
}
rectangle.component.ts
import { Component } from "@angular/core";
@Component({
selector:'Rectangle-Area',
templateUrl:'./rectangle.component.html'
})
export class RectangleComponent{
length:number
breadth:number
area:number
constructor(){
this.length = 0
this.breadth = 0
this.area = this.length*this.breadth;
}
onCalculate(){
this.area = this.length*this.breadth;
}
}
cylinder.component.ts
import { Component } from "@angular/core";
import { RadioControlValueAccessor } from "@angular/forms";
@Component({
selector:'Cylinder-Area',
templateUrl:'./cylinder.component.html'
})
export class CylinderComponent{
radius:number
height:number
area:number
constructor(){
this.radius = 0
this.height = 0
this.area = 2*22/7*this.radius*(this.radius+this.height)
}
onCycCalculate(){
this.area = this.area = 3.14*this.radius*this.radius*this.height
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RectangleComponent } from './rectangle/rectangle.component';
import { CylinderComponent } from './cylinder/cylinder.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
AppComponent,
RectangleComponent,
CylinderComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.css
.container{
background-color: ##B2D732;
text-align: center;
height: 720pxx;
}
.subcontainer{
background-color: #C21460;
width: 600px;
height: 300px;
text-align: center;
margin-left: 400px;
margin-bottom: 50px;
}
h1{
font-family: Georgia, 'Times New Roman', Times, serif
}
Thus the above program to perform mathematical calculations using Angular framework is created successfully.