passing ngmodel throug a div element

Question

I have a value in my table. I am trying to pass the particular cell value to typescript. But when I try it using ngmodel and when I debug it gets undefined. The ngmodel value qty was assigned as number in typescript and it is a number. The stackblitz is only for refernce in reality I am getting a value from a td tag which I got from a list

Stackblitz sample one: https://stackblitz.com/edit/angular-ivy-sundu2?file=src%2Fapp%2Fapp.component.html

My code:

   <td>
      <div *ngIf="data === 'RARE' ; else notype" style="cursor: pointer;"
       (click)="View()" [(ngModel)]="qty" name="fieldName" ngDefaultControl>{{ list.value}}</div>
       <ng-template #notype (click)="View()"> {{currentvalue}}</ng-template>
   </td>

Answer 1

You can use (click) inside the html template

<td>
   <div *ngIf="data === 'RARE' ; else notype" style="cursor: pointer;"
    (click)="setQty(list.value)" name="fieldName" ngDefaultControl>{{ list.value}}</div>
     <ng-template #notype (click)="View()"> {{currentvalue}}</ng-template>
</td>

and in the component

setQty(val: number) {
  this.qty = val;
}

Stackblitz: https://stackblitz.com/edit/angular-ivy-gavpqc?file=src/app/app.component.ts

For more details see: https://angular.io/guide/event-binding

Answer 2

try [innerHTML] instead of [(ngModel)] :

<td>
  <div *ngIf="data === 'RARE' ; else notype" style="cursor: pointer;"
   (click)="View()" [innerHTML]="qty" name="fieldName" ngDefaultControl></div>