Angular 2父子布尔函数

Question

I'm trying to emit a boolean change from a parent component to a child component but having no luck.

Parent component:

isActionComplete: boolean;

deleteUser() {
    this.userService.delete();
    this.isActionComplete = true;
    setTimeout(() => {
      this.isPopUpActive = false;
    }, 3000);
    this.isActionComplete = false;
  }

Parent html:

<app-pop-up [isActionComplete]="isActionComplete"></app-pop-up>

Child component:

@Input() isActionComplete: boolean;

Child html:

<div *ngIf="isActionComplete">Complete</div>

If I change the 'isActionComplete: boolean;' to 'isActionComplete = true;' in the parent component it does change the state of the child boolean but for some reason when its in the 'deleteUser' function it does not work.

Please could someone let me know where im going wrong?

Thanks

Answer 1

Synatx for property binding is [prop]="value"

<app-pop-up [isActionComplete]="isActionComplete"></app-pop-up>

You need to move the last statement inside setTimeout(); setTimeout() does not block the execution instead methods or statement inside setTimeout is moved to event-queue and is executed on timeout and statements after the block is executed in the meantime.

example:

method a();
setTimeout(()=>{method b()},0})
methhod c();

The order of execution would be
a();
c();
b();

 deleteUser() {
        this.userService.delete();
        this.isActionComplete = true;
        setTimeout(() => {
          this.isPopUpActive = false;
         this.isActionComplete = false;
        }, 3000);

      }

Answer 2

I realised what my issue was! It was the setTimeout causing the problem. I needed to move it inside this:

deleteUser() {
    this.userService.delete();
    this.isActionComplete = true;
    setTimeout(() => {
      this.isPopUpActive = false;
      this.isActionComplete = false;
    }, 3000);
  }

Hope this helps someone out in the future!