ERROR NG9 Property value does not exist on type EventTarget

Question

I'm trying to do a data binding in Angular, but I received this error message: [ERROR] NG9: Property 'value' does not exist on type 'EventTarget'. [plugin angular-compiler] src/app/data-binding/data-binding.component.html:3:42: 3 │ <input type="text" (input)="$event.target.value"/>

This is my data-binding.component.html `

Primeiro Componente

<input type="text" [(ngModel)]="$event.target.value"/>

<h1>{{ numero }}</h1>`

this is my data-binding.component.ts `import { Component, OnInit } from '@angular/core';

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

export class DataBindingComponent implements OnInit {
    public numero?: number;
    constructor() {}
    ngOnInit() {}
}`

I tried this:

data-binding.component.html `

Primeiro Componente

<input type="text" (input)="eventHandler(($event.target as HTMLInputElement).value)">

<h1>{{ numero }}</h1>`

data-binding.component.ts `import { Component, OnInit } from '@angular/core';

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

export class DataBindingComponent implements OnInit {
    // Declarando a variável numero e atribuindo um valor inicial
    public numero?: number;
    constructor() {}
    ngOnInit() {}

    eventHandler(value: string): void {
        console.log('Input value:', value);
        // ... handle the value further
        this.numero = Number(value);

  }

}`

[ERROR] NG5002: Parser Error: Unexpected token ')' at column 55 in [eventHandler(($event.target as HTMLInputElement).value)] in D:/ProgramFiles/cursoAngular/src/app/data-binding/data-binding.component.html@2:28 [plugin angular-compiler]

src/app/data-binding/data-binding.component.html:5:4:
  5 │ <h1>{{ numero }}</h1>
    ╵     ~~~~~~~~~~~~

Error occurs in the template of component DataBindingComponent.

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

And This:

data-binding.component.html `

Primeiro Componente

<input type="text" (input)="obterNumero(value)"/>

<h1>{{ numero }}</h1>`

data-binding.component.ts `import { Component, OnInit } from '@angular/core';

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

export class DataBindingComponent implements OnInit {
    // Declarando a variável numero e atribuindo um valor inicial
    public numero?: number;
    constructor() {}
    ngOnInit() {}

    obterNumero(numero: number) {
        this.numero = numero;
  }

}`

Application bundle generation complete. [0.208 seconds] Page reload sent to client(s). X [ERROR] NG4: Expected 1 arguments, but got 0. [plugin angular-compiler]

src/app/data-binding/data-binding.component.html:3:28:
  3 │ <input type="text" (input)="obterNumero()"/>
    ╵                             ~~~~~~~~~~~

Error occurs in the template of component DataBindingComponent.

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Application bundle generation failed. [0.232 seconds] X [ERROR] NG9: Property 'value' does not exist on type 'DataBindingComponent'. [plugin angular-compiler]

src/app/data-binding/data-binding.component.html:3:40:
  3 │ <input type="text" (input)="obterNumero(value)"/>
    ╵                                         ~~~~~

Error occurs in the template of component DataBindingComponent.

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Application bundle generation failed. [0.207 seconds] X [ERROR] NG9: Property 'value' does not exist on type 'DataBindingComponent'. [plugin angular-compiler]

src/app/data-binding/data-binding.component.html:3:40:
  3 │ <input type="text" (input)="obterNumero(value)"/>
    ╵                                         ~~~~~

Error occurs in the template of component DataBindingComponent.

src/app/data-binding/data-binding.component.ts:5:15:
  5 │   templateUrl: './data-binding.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Answer 1

You could handle the value within your component file like the following:

template

<input type="text" (input)="setMyNumber($event)"/>
<h1>{{ myNumber }}</h1>`

component.ts

@Component({...})
export class MyComponent {
  myNumber!: number | undefined;

  setMyNumber(event: Event): void {
    const value = Number((event.target as HTMLInputElement).value);
    this.myNumber = value;
  }
}

Or like this:

template

<input type="text" [(ngModel)]="myNumber"/>
<h1>{{ myNumber }}</h1>

component.ts

@Component({...})
export class MyComponent {
   myNumber!: number | undefined;
}

Or using reactive forms: template

<input type="text" [formControl]="inputControl"/>
<pre>{{ inputControl.value | json }}</pre>

component.ts

@Component({...})
export class MyComponent {
   inputControl = new FormControl<string | null>(null);
}

In this section of your code, you are getting this error because you are not providing value to the function obterNumero, you probably meant $event rather than value which is a keyword

src/app/data-binding/data-binding.component.html:3:40:
  3 │ <input type="text" (input)="obterNumero(value)"/>

Here, you also get an error because you are supposed to bind ngModel to a variable from your component

<input type="text" [(ngModel)]="$event.target.value"/>
<h1>{{ numero }}</h1>`

In this scenario, although the logic written is correct, Angular doesn't like handling that logic in the template HTML, it is better to do it on the component I showed previously. Avoid writing too much logic on the template.

<input type="text" 
   (input)="eventHandler(($event.target as HTMLInputElement).value)">
<h1>{{ numero }}</h1>`