Let's imagine we want our timer component to notify us when the countdown is finished so that we can perform other actions outside the realm of the component. We can achieve such functionality with an output property like this:

<timer (countdownComplete)="onCountdownCompleted()"></timer>

Note the attribute wrapped between braces. This informs Angular that such an attribute is, in fact, an output property that will trigger the event handler we bind to it. In this case, we will want to create an onCountownCompleted event handler on the container object that wraps this component.

By the way, the camel case is not a coincidence. It is a naming convention applied to all output and input property names in Angular.

We will find output properties mapped to interaction events that we already know, such as click, mouseover, mouseout, focus, and more:

<button (click)="doSomething()">click me</button>