I have the following component:
@Component({
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
// Must reference the enum to be able to use types later
enumModalContentType = EnumModalContentType;
// Changes according to button clicks to point to the right component to show in modal
modalContentType: EnumModalContentType;
}<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" (click)="modalContentType = enumModalContentType.EnumValue" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<app-modal [contentType]="modalContentType"></app-modal>Which works perfectly well. My question is: why is it that we're obliged to reference EnumModalContentType in order to be able to use it in the HTML later? Why can't we just use it as a type directly?
It all comes down to scope. It is the same reason why if you are building AOT, you can't have private variables used in your templates. There must be a local public variable in the same scope as your template. At build time, everything is logically separated and scoped, and without a local variable there is nothing for the template to bind to.