Type casting within a template in Angular 2
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.
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;
}
That's not possible because Event
can't be referenced from within the template.
(as
is also not supported in template binding expressions)
You need to make it available first:
class MyComponent {
EventType = Event;
then this should work
[(ngModel)]="(event as EventType).acknowledged"
update
class MyComponent {
asEvent(val) : Event { return val; }
then use it as
[(ngModel)]="asEvent(event).acknowledged"