How do I implement Angular's “banana in a box” two-way binding with Custom Elements?

问题

I'm trying to build a custom element that will be consumed by an Angular app. The custom element will take a prop and potentially manipulate it.

My understanding was that I could use the "banana in a box" to handle this binding, aka <custom-element [(foo)]="bar"> gets converted to <custom-element [foo]="bar" (fooChange)="bar = newBar">, or the like.

My Angular template:

<an-el [(clicked)]="isClicked"></an-el>
<p>Did you click a button? {{ isClicked }}</p>

My custom element dispatches an event:

this.dispatchEvent(new CustomEvent('clickedChange', { bubbles: true, detail: true }));

But it appears to bind the entire CustomEvent to isClicked:

Did you click a button? [object CustomEvent]

What am I doing wrong?

Here's my app (run in Chrome): https://stackblitz.com/edit/angular-nlguf4

来源：https://stackoverflow.com/questions/48526067/how-do-i-implement-angulars-banana-in-a-box-two-way-binding-with-custom-eleme