I have in a footer 3 buttons. When I click "next" I redirect to another page. But when I click on "Edit" I would only enable some field, while it does the same action of the next button ( so redirect to another page ).

In your opinion why I have this behaviour?

<div class="row">
<div class="card-footer-sx col">
    <button class="btn back-btn" href="javascript:void(0)"
        (click)="goBack()">Back</button>
    </div>
    <div class="card-footer-center col" style="display: contents"
         href="javascript:void(0)">
        <button class="btn next-btn float-center"
            (click)="enableEditing()">Edit</button>
    </div>

    <div class="card-footer-dx col " >
        <div class="pointer flex-end">
            <div class="container-next-button">
                <div class="app-loader loader-border app-loader-button"
                    *ngIf="loading">
                        <div class="loader">
                        <div class="la-ball-pulse loaderColor">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                        </div>
                </div>
                    <button class="btn next-btn float-right error"
                        (click)="goToNext(undefined)" 
                        role="button">Next
                    </button>
                    </div>
                    </div>
    </div>
</div>

page.ts

enableEditing(){
 this.checkEdit = !this.checkEdit;
}

goToNext(customer){
// navigate to another page
}