Checkbox not working inside ngTemplateOutlet when parent listens for click event - bug?

I've been trying to figure this out for quite a while now.

Basically, I have a ng-template that contains a single checkbox. I then include that into a component by using <ng-container *ngTemplateOutlet>. The ng-container is contained inside a div that has a click event listener. The listener does nothing currently, just an empty function.

When I run this, everything's good. I can check and uncheck the checkbox.

Here's the template code:

<div (click)="handleClick($event)">
  <ng-container *ngTemplateOutlet="foo"></ng-container>
</div>

<ng-template #foo>
  <input type="checkbox">
</ng-template>

If I add a context to the ngTemplateOutlet, though, this mysteriously breaks the checkbox. So, if I update the template code to this:

<div (click)="handleClick($event)">
  <ng-container *ngTemplateOutlet="foo; context: context"></ng-container>
</div>

<ng-template #foo>
  <input type="checkbox">
</ng-template>

and I have a property called context in my component class (just an empty object for now), the checkbox no longer gets checked when I click on it.

It would probably be easier just to link to the simple example:

http://ift.tt/2y1SNJB

It's definitely the context that is causing this issue. When I remove the context, the checkbox works again.

EDIT: I forgot to mention - if I remove the (click) listener from the containing div, the checkbox works correctly as well. Could providing a context affect the propagation of events somehow?

Could this be an Angular bug? Or is there some concept I'm missing?

Thanks!