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.');
}
}
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
}
}