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

I came up with a solution. The following project has a directive that binds to the ngModel and uses the directive's OnDestroy event to trigger setting the ngModel to null.

https://stackblitz.com/edit/angular-4uwdmi?file=src%2Fapp%2Fapp.component.html

Answer 2

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