Topic: setting text reloads page

klauswiesel free asked 6 years ago


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);
  }

}

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: PC 64 Bit
  • Browser: Chrome 68.0.3440.106
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No