Ionic loader, without clicking event (loading.dismiss())

webfaisalbd

Faisal Ahmed

Posted on May 16, 2024

Ionic loader, without clicking event (loading.dismiss())

In html file,

  <div *ngIf="!isLoading" class="edit-area">
    <div class="container">
      <div class="user">
            <h2>Show This Content</h2>
      </div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode

In ts file

// data store
isLoading = false;

  constructor(
    private loadingCtrl: LoadingController,
  ) { }


  ngOnInit() {
    this.onInitForm();
    // Base Data
    this.getLoggedUserData();
    this.toggleLoading();
  }

  // loading
  async toggleLoading() {
    if (this.isLoading) {
      await this.showLoading();
    }
  }

  async showLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Loading.....',
      duration: 3000,
    });

    await loading.present();
    loading.dismiss();
    this.isLoading = false;
  }


/***
   * HTTP REQUEST HANDLE
   * getLoggedUserData()
   */
  private getLoggedUserData() {
    this.isLoading = true;
    if (this.isLoading) {
      this.showLoading();
    }
    this.subDataOne = this.userDataService.getLoggedInUserData().subscribe({
      next: (res) => {
        this.user = res.data;
        console.log('this.user', this.user)
        this.setFormValue();
        // this.isLoading = false;
      },
      error: (err) => {
        if (err) {
          console.log(err);
        }
      }
    })
  }


Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
webfaisalbd
Faisal Ahmed

Posted on May 16, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related