Angular 2+ - Set ngModel to null when ngIf causes hide

Question

I have an issue similar to Reset ngModel values on ngIf in angular2

I would like to set any ngModel values to null whenever a parent *ngIf causes that element to be hidd

Answer 1

you can leverage the DoCheck Lifecycle hook to set the values.

ngDoCheck()
  {
    if(!this.outerBoxVisible)
    {
      this.outerTextValue=null;
      console.log('outertextvalue='+this.outerTextValue);
    }
     if(!this.innerBoxVisible)
    {
      this.outerTextValue=null;
      console.log('innertextvalue='+this.outerTextValue);
    }
  }

Forked Stackblitz