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!
As mentioned, using a barebone method call will have performance impact.
A better approach is to use a pipe, and you have best of both worlds. Just define a Cast pipe:
@Pipe({
name: 'cast',
pure: true
})
export class CastPipe implements PipeTransform {
transform(value: any, args?: any): Event {
return value;
}
}
and then in your template, use event | cast when you need the cast.
That way, change detection stays efficient, and typing is safe (given the requested type change is sound of course).
Unfortunately, I don't see a way to have this generic because of the name attribute, so you'd have to define a new pipe for each type.