I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator component in the Result component. Can you suggest some methods to achieve this? https://i.sstatic.net/AhQMz.png
https://i.sstatic.net/lcLip.png
calculator.component.ts
@Component({
selector: 'app-calculator',
templateUrl: './calculator.component.html',
styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
public number1: number;
public number2: number;
public result: number;
constructor() {
}
sum() {
this.result = this.number1 + this.number2;
}
diff() {
this.result = this.number1 - this.number2;
}
mult() {
this.result = this.number1 * this.number2;
}
divi() {
this.result = this.number1 / this.number2;
}
ngOnInit(): void {
}
}
calculator.component.html
<!DOCTYPE html>
...
</html>
app-routing.module.ts
import { NgModule } from '@angular/core';
...
export class AppRoutingModule { }
app.component.html
<h1>Angular Router</h1>
...
</nav>
<router-outlet></router-outlet>
data.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor() { }
}