Type casting within a template in Angular 2

Question

I'm working on an Angular project (Angular 4.0.0) and I'm having trouble binding a property of an abstract class to ngModel because I first need to cast it as the concrete class it actually is in order to access the property.

i.e. I have an AbstractEvent class this has a a concrete implementation Event which has a boolean property 'acknowledged' which I need a two way binding via ngModel to set with a checkbox.

I currently have this element in my DOM:

<input type="checkbox" *ngIf="event.end" [(ngModel)]="(event as Event).acknowledged"                                            [disabled]="(event as Event).acknowledged"> 

Unfortunately this is throwing the following error:

Uncaught Error: Template parse errors: Parser Error: Missing expected ) at column 8 in [(event as Event).acknowledged]

Googling around seemed to suggest this might be because using 'as' is not supported when using it inside a template? Although I'm not certain about this.

I also can't work out how to just write a function for it in my typescript file driving the template because this would break the two way binding on ngModel that I require.

If anyone has any way to get around this or perform type casting in angular templates correctly I would be very appreciative!

Answer 1

If you don't care about type control.

In Angular 8 and higher versions

[(ngModel)]="$any(event).acknowledged" 

From Offical Document: https://angular.io/guide/template-typecheck#disabling-type-checking-using-any

@Component({   selector: 'my-component',   template: '{{$any(person).addresss.street}}' }) class MyComponent {   person?: Person; }