Я немного возился с Angular и хочу сделать простое приложение-калькулятор.

В моем calculator.component.ts есть следующее

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

@Component({
  selector: 'calculator',
  template: `<h1>{{name}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class CalculatorComponent  {
  @Input() name: string;
}

var add_numbers = function() {
  var num1 = Number(document.getElementById("first_number_input") as HTMLInputElement);
  var num2 = Number(document.getElementById("second_number_input") as HTMLInputElement);
  var result = num1 + num2
}

и настроил мой app.component.html так

<<calculator name="{{ name }}"></calculator>
<div id = "first_number">
  <h3>First Number</h3>
  <input id="first_number_input" type="text">

<div id = "second_number">
  <h3> Second Number</h3>
  <input id = "second_number_input" type="text">
</div>

<div id="solution">
  <h3> Solution: </h3>
  <p>
  <script src="calculator.component.ts"> {{result}} </script>
  </p>

однако, когда я ввожу два числа в поля ввода, раздел под заголовком решения остается пустым и не выглядит так, как будто что-то происходит, есть ли какой-то шаг в моем typeScript или HTML, который я пропускаю?

0
Banani720