Page reloads when using EventEmmiter
<p>I have a parent/child component setup. The parent has a button (Display Form) that will display the child component, and the child a button that hides the child component (Cancel).</p>

<p>When I push the cancel button, the form disappears but for some reason the page then reloads, any ideas why or how to prevent this?</p>

<p>This doesn't happen when I use the button in the parent to display, or hide the form, only if I use the button in the child.</p>

<p>Parent HTML</p>

<pre><code>&lt;div *ngIf="showContactDetail" class="panel-body"&gt;
    &lt;app-contact-detail 
        (showContactDetail)='setShowContactDetail($event)'&gt;
    &lt;/app-contact-detail&gt;
&lt;/div&gt;
</code></pre>

<p>Parent TS</p>

<pre><code>setShowContactDetail(value: boolean) {
    this.showContactDetail = value;
}
</code></pre>

<p>Child HTML</p>

<pre><code> &lt;button id="cancelContact" name="cancelContact" 
            class="btn btn-danger" (click)='cancelClicked()'&gt;Cancel&lt;/button&gt;
</code></pre>

<p>Child TS</p>

<pre><code>@Output() showContactDetail: EventEmitter&lt;boolean&gt; =
    new EventEmitter&lt;boolean&gt;();

cancelClicked(): void {
    this.showContactDetail.emit(false);
}
</code></pre>