3

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).

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?

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.

Parent HTML

<div *ngIf="showContactDetail" class="panel-body">
    <app-contact-detail 
        (showContactDetail)='setShowContactDetail($event)'>
    </app-contact-detail>
</div>

Parent TS

setShowContactDetail(value: boolean) {
    this.showContactDetail = value;
}

Child HTML

 <button id="cancelContact" name="cancelContact" 
            class="btn btn-danger" (click)='cancelClicked()'>Cancel</button>

Child TS

@Output() showContactDetail: EventEmitter<boolean> =
    new EventEmitter<boolean>();

cancelClicked(): void {
    this.showContactDetail.emit(false);
}
Terry
  • 1,621
  • 4
  • 25
  • 45
  • 1
    Possible you're looking for http://stackoverflow.com/questions/38786995/avoid-angular2-to-systematically-submit-form-on-button-click – yurzui Nov 18 '16 at 18:36
  • Thanks, that directed me to an answer, I needed to specify the button as type button – Terry Nov 18 '16 at 19:37

0 Answers0