im trying to bind each typed value from the numeric keypad to the input element above like so

this is the code

<input type="text" name="" id="" class="password-input" [(ngModel)]="password" placeholder="Password">

    <ul id="keyboard">   
        <li class="letter" (click)="click(1)">1</li>  
        <li class="letter" (click)="click(2)">2</li>  
        <li class="letter" (click)="click(3)">3</li>  
        <li class="letter clearl" (click)="click(4)">4</li>  
        <li class="letter" (click)="click(5)">5</li>  
        <li class="letter" (click)="click(6)">6</li> 
      
        <li class="letter clearl" (click)="click(7)">7</li>  
        <li class="letter" (click)="click(8)">8</li>  
        <li class="letter" (click)="click(9)">9</li>  
        <li class="letter" (click)="click(0)">0</li>
        <li class="switch">abc</li>  
         <li class="return">retur</li>
         <li class="delete lastitem"(click)="deletePass()"><</li>   
    </ul>  

the function in login.ts file

password: number[] = [] //this is how i have declared my password variable

click(num: number){
   this.password.push(num);
 }

now i want to bind the value of the password variable to the input file

CodePudding user response：

You should consider storing your password as a string.

password: string = "";

click(num: number) {
  this.password  = num.toString();
}

deletePass() {
  this.password = "";
}