I have a piece of code that is called using buttonclick, and which mimics asynchronous server calls using callback technique, which simply set a message field. I call this code from

1. a button directly on the component
2. a card href inside of a MDBootstrap card

In case 1, the message is given out properly,. in case 2. the form is reloaded This is the component:

<button (click)="onClick()">Fetch</button>
<div>{{message}}</div>

<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title"><a>Callbacks</a></h4>
          <p class="card-text">First approach to handle asynchronous calls</p>
          <a href="#" class="btn btn-primary" (click)="onClick()">Fetch</a>
          <div>{{message}}</div>
        </div>
      </div>
    </div>
  </div>
</div>

This is the code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-callbacks',
  templateUrl: './callbacks.component.html',
  styleUrls: ['./callbacks.component.scss']
})
export class CallbacksComponent  {

  message: '';

  onClick() {
    console.log("clicked");
    this.checkAuth(auth => {
      console.log("auth", auth);
      if (auth) {
        this.fetchUser(user => {
          this.setText(user.name)
        })
      }
    })
  }

  setText(text) {
    this.message = text;
  }

  checkAuth(cb) {
    this.setText('Checking auth');
    setTimeout(() => {cb(true);}, 2000);
  }

  fetchUser(cb) {
    this.setText('Fetching user');
    setTimeout(() => {cb({name: "Max"});}, 2000);
  }

}

---