Search code examples
angularangular19

Use of "this" to reference an element from inside it worked in Angular 18, fails in 19

An Angular component includes the following code:

<span *ngFor="let date of dateArray">
  <button
    type="button"
    class="btn btn-outline-primary fs-6 mt-1 me-1"
    [attr.data-date]="date"
    [disabled]="isSaving"
    (click)="removeDate(this.date)">
    {{ date }}
    <i class="bi bi-x" [attr.aria-label]="'Delete ' + date"></i>
  </button>
</span>

Right after updating my application's Angular version from 18 to 19, I tried to build the app and received the error message

Error: src/app/views/.../my.component.html:46:36 - error TS2339: Property 'date' does not exist on type 'AbcComponent'.

46           (click)="removeDate(this.date)">
                                      ~~~~

What, if anything, does (or should) the compiler understand this to refer to here? It can't be the component because this component has no field or property named date. It occurs to me that within the button, in Angular 18, this might have been understood to reference the button itself. Then, this.date would have referred to the value defined in the line

[attr.data-date]="date"

Having said that, I don't know why it was done this way, instead of just having

(click)="removeDate(date)">

I rolled back to the Angular 18 version of the application and made this change, and it worked. So, as I said, I don't know why it had been written as this.date or why [attr.data-date] is defined at all.

Anyway, this.date apparently doesn't work in Angular 19 and I guess this no longer references the button. Is this a feature that they decided to remove or a bug that they fixed? Or is the situation something else that I'm missing?

Solution

  • This is actually a bugfix that landed in v19.

    Now this consistently refers to a class property.