With the following code:
template
<button (click)="myMethod()">myMethod()</button>
<!-- <button (click)="foo()">foo()</button> -->
<ng-container [ngSwitch]="state">
<ng-container *ngSwitchCase="0">
<div></div>
<button (click)="myMethod()">myMethod()</button>
<button (click)="foo()">foo()</button><!-- why no error -->
</ng-container>
<div *ngSwitchCase="1"></div>
</ng-container>
component
export class MyComponent {
public state = 0;
public myMethod(): void {
// no op
}
}
ng build --aot builds, but if you uncomment the 2nd line in the template you expectedly get
Property 'foo' does not exist on type 'MyComponent'.
Why does the <button (click)="foo()">foo()</button> inside the ng-container not error?
Before you suggest:
<div *ngSwitchCase="0">
<div></div>
<button (click)="myMethod()">myMethod()</button>
<button (click)="foo()">foo()</button><!-- why no error -->
</div>
that will render as
<div>
<div></div>
<button>myMethod()</button>
<button>foo()</button>
</div>
but I need just
<div></div>
<button>myMethod()</button>
<button>foo()</button>
And there are other ways around this, but the question is for fundamental understanding before making bug or feat.
