-2

I have a div that contains click event, here once I click "click here" label alert should come based on 2 condition, first one if getListData is true and second one if I click the label only after 5 sec of getListData is true. I have tried but its not working properly. Here is the code below

home.component.html

<div (click)="clickhere()">Click here</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; 
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: boolean = false;
  constructor(private router: Router) { }

  ngOnInit() {

  }
  clickhere(){
      this.getListData = true;
      console.log(this.getListData);
      setTimeout(function(){
      if(this.getListData == true){
         alert('true'); 
      }
      }, 3000);
  }

}
anguler-developer
  • 35
  • 4
  • 10
  • 1
    you must have a new variables (for example flag) and subscribe/wait for the event that makes getListData = true, then have a timeout and set the flag to true, in the clickhere(), check if flag is true then alert – khodayar J Jun 16 '20 at 18:39
  • I think it would be more helpful to know the what you are trying to accomplish as well as what you have done so far. "second one if I click the label only after 5 sec of getListData is true" is a tough explanation to get you on the right direction – Jeremy Jun 16 '20 at 18:55

1 Answers1

0

'this' context is not available inside the setTimeout function. You can declare it as an arrow function to show the alert.

clickhere(){ this.getListData = true; console.log(this.getListData); setTimeout(()=>{
if(this.getListData){ alert('true'); } }, 3000);
}

For reference you can see here: https://stackoverflow.com/a/41106146/7309449

rashmi chandran
  • 43
  • 1
  • 8
  • Thanks for your answer ,actually its not working as per second condtion...if I click the label only after 5 sec of getListData is true , I have mentioned in description. – anguler-developer Jun 16 '20 at 18:28