angular : passing the input value to the component

Question

I want to affect the value of this input to a variable 'numToAdd' which is in my component and then add 1 to the variable 'numToAdd', but I can't pass the value of the html input to my component variable 'numToAdd'. How to bind my html input to a variable in the component ?

my html code

<input type="number" id=num class=num>

my component

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

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

  ngOnInit(): void {}

  numToAdd: number;
  
  constructor() { }

  add: void {
    this.numToAdd++;
  }

}

Answer 1

Two-way binding a primary functionality of angular. Use the ngModel directive to bind input to variables.

<input type="number" id="num" class="num" [(ngModel)]="numToAdd">

The above code binds the variable numToAdd with the input. Find more details here