Property function does not exists on type "AppComponent"

Question

we are trying to push array elements into data(array). I am a beginner in angular and typescript and working on a formula calculator project. I have tried to convert javascript to typescript and I get these errors. I am stuck whether I need to do some import or export for my function to work or I am missing something in the code. First, i created the formula calculator The code is working perfectly in javascript but the problem started when I converted javascript to typescript for my angular project.I am using Angular12.

------ERROR-------

    Error: src/app/app.component.html:27:56 - error TS2339: Property 'add_element' does not exist on type 'AppComponent'.  27 <input type=button id="element" value='ADDDD' (click)='add_element()'  src/app/app.component.ts:6:16  



----App.Comonent.html-----

    <input type=text  id='result'>
    <input type=button id="element" value='ADDDD' (click)='add_element()'>
    <div id=disp></div>

------App.component.ts------

declare var require:any
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  //  data:any = new Array(); // creating array
  //  data1 = new Array();

  addElement = function add_element():any{
   var  data:any = new Array(); // creating array
  data.push((document.getElementById('result') as HTMLInputElement).value); // adding element to array
  ((document.getElementById('result') as HTMLInputElement).value)=''; // Making the text box blank
  let element:any = function disp() // displaying the array elements
 {
   let element1:any = function disp(row1:number,col1:number):any{
  var str='';
  str = 'total number of elements in data array : ' + data.length + '<br>';
  let n = row1 * col1; 
  if(data.length<= n ){

  for (var i=0;i<data.length;i++)
  {

  str += i + ':'+data[i] + "<br >";  // adding each element with key number to variabl
  }

  (document.getElementById('disp')as HTMLInputElement).innerHTML=str; // Display the elements of the array


  }
}
}
  }


 add_element() {
  throw new Error('Function not implemented.');
}
}

Answer 1

You need to use the same name of the method in the template and class. For example:

<input type=button id="element" value='ADDDD' (click)='addElement()'>

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

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }

  addElement(): void {
    // your code here
  }
}