Take data from HTML forms - Typescript

Question

I have an API-web, in c#, that stores in the database received via Post, and I’m trying to make an interface in Angular, which has an HTML form, which should receive the title and the body of the data.

This is HTML, componentized:

    <div>
  <form method="POST" id="push">

    <input type="text" name="title" placeholder="Title"  id="title"/>
    
    <input type="text" name="body" placeholder="Body" id="body"/>
    
    <input type="submit" name="submit" onclick="getData()"/>
    </form> 
  
</div>

This is the Typescript file:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

function getData()
{
    var title = document.getElementById("title");
    var body = document.getElementById("body");

  alert(title); //Essa linha é só para testar se consegui pegar os dados do form
}

The problem is that when I click on "Submit", I get a 404 on the screen. Why does this happen? I’m new to Angular.