How to use the ellib.OnChange function in ellib

this.fsSvc.run(trashOp);
        break;
    }
    // if event is missing, that means we were invoked programatically
    // so we need to close the menu ourselves
    if (!event.event)
      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
  }

  onNewName(name: string): void {
    this.newName = name;
  }

  // bind OnChange handlers

  @OnChange('fs', 'prefs', 'tab', 'view') onChange(): void {
    if (this.fs && this.prefs && this.tab && this.view)
      this.updateDescriptors();
  }

  // lifecycle methods

  ngOnInit(): void {
    this.store.dispatch(new Progress({ state: 'running' }));
  }

  // private methods

  private _updateDescriptors(): void {
    this.dictionary = this.dictSvc.dictionaryForView(this.view);
    this.tab.paths.forEach(path => {
      this.descriptorsByPath[path] =

const ctrl = this.outliner.nativeElement;
    ctrl.style.display = 'none';
    // NOTE: sanity check -- we've seen fewer split sizes that there are splits
    // @see https://github.com/mflorence99/el-file/issues/6
    if (event.sizes.length === this.dictionary.length) {
      const widths = this.dictionary.reduce((acc, entry, ix) => {
        acc[entry.name] = event.sizes[ix];
        return acc;
      }, { } as ViewWidths);
      this.store.dispatch(new UpdateViewWidths({ viewID: this.viewID, widths }));
    }
  }

  // bind OnChange handlers

  @OnChange('view') newState(): void {
    if (this.view)
      this.dictionary = this.dictSvc.dictionaryForView(this.view);
  }

  // lifecycle methods

  ngAfterViewInit(): void {
    this.split.dragProgress$.subscribe((event: any) => this.onOutlinerShow(event));
  }

  ngOnDestroy(): void {
    document.body.removeChild(this.outliner.nativeElement);
  }

  ngOnInit(): void {
    document.body.appendChild(this.outliner.nativeElement);

while (row > alreadySelected[alreadySelected.length - 1])
          newlySelected.push(row--);
        const rows = alreadySelected.concat(newlySelected);
        actions.push(new ReplaceRowsInSelection({ rows }));
      }
    }
    else if (event.ctrlKey)
      actions.push(new ToggleRowInSelection({ row }));
    else actions.push(new ReplaceRowsInSelection({ rows: [row] }));
    if (actions.length > 0)
      this.store.dispatch(actions);
  }

  // bind OnChange handlers

  @OnChange('ddb', 'ddbschema', 'ddbview') newState(_ddb, _ddbschema, _ddbview): void {
    if (this.ddb && this.ddb.table && this.ddbschema && this.ddbview)
      this.newStateImpl();
  }

  // private methods

  private _newStateImpl(): void {
    this.schemes = this.dictSvc.schemaForView(this.ddb, this.ddbschema, this.ddbview);
    this.ddb.rows = this.dictSvc.rowsForView(this.ddb.rows, this.schemes, this.ddbview);
    this.cdf.detectChanges();
    this.newTable.emit();
  }

  private trackColsImpl(index: number,
                        scheme: Scheme): string {
    return scheme.column;

private awsSvc: AWSService,
              private electron: ElectronService,
              private injector: Injector,
              private store: Store,
              private zone: NgZone) {
    super();
    this.awsSvc.init();
    this.tabs$ = this.makeNavigator();
    this.handleActions(); 
    this.handleWindowBounds();
    this.electron.ipcRenderer.on('progress', this.showProgress.bind(this));  
  }     

  // bind OnChange handlers

  @OnChange('prefsForm') savePrefs() {
    if (this.prefsForm && this.prefsForm.submitted) {
      // TODO: why do we need this in Electron? and only running live?
      // at worst, running in NgZone should work -- but otherwise a DOM
      // event is necessary to force change detection
      nextTick(() => {
        this.store.dispatch(new UpdatePrefs(this.prefsForm.prefs));
      });
    }
  }

  // private methods

  private canNavigate(tab: Navigator): Observable[] {
    if (!tab.canNavigate)
      return [of(true)];
    else return tab.canNavigate.map(clazz => {

this.viewForm.get('visibility').valueChanges
      .pipe(
        map(visibility => Object.entries(visibility)),
        map(entries => entries.some(entry => !!entry[1])),
        map(atLeastOne => atLeastOne? 'atLeastOne' : null)
      ).subscribe(atLeastOne => this.viewForm.get('atLeastOne').setValue(atLeastOne));
  }

  /** Close drawer */
  close(): void {
    this.drawerPanel.close();
  }

  // bind OnChange handlers

  @OnChange('view') newView(): void {
    if (this.view && this.view.visibility)
      this.viewForm.patchValue({ visibility: this.view.visibility });
  }

  @OnChange('viewID') newViewID(): void {
    if (this.viewID) {
      this.viewForm.reset();
      this.viewForm.patchValue({ viewID: this.viewID });
    }
  }

}

this.store.dispatch([new ErrorMessage(''),
                           new KeyboardLocked(false),
                           new Alarm(false)]);
    }
    event.preventDefault();
  }

  // listeners

  @HostListener('window:resize') onResize() {
    this.setup();
  }

  // bind OnChange handlers

  @OnChange('layout') updateLayout() {
    this.setup();
  }

  @OnChange('prefs') updatePrefs() {
    if (this.prefs) {
      const style = document.documentElement.style;
      switch (this.prefs.color) {
        case 'blue':
          style.setProperty('--lu3270-color', 'var(--mat-blue-300)');
          style.setProperty('--lu3270-highlight-color', 'var(--mat-blue-400)');
          break;
        case 'green':
          style.setProperty('--lu3270-color', 'var(--mat-green-300)');
          style.setProperty('--lu3270-highlight-color', 'var(--mat-green-400)');
          break;
        case 'orange':

}

  @OnChange('filePropsForm') saveFileProps(): void {
    if (this.filePropsForm && this.filePropsForm.submitted) {
      // TODO: why do we need this in Electron? and only running live?
      // at worst, running in NgZone should work -- but otherwise a DOM
      // event is necessary to force change detection
      nextTick(() => {
        const path = this.filePropsForm.path;
        const metadata = this.filePropsForm.metadata;
        this.store.dispatch(new UpdateFileMetadata({ path, metadata}));
      });
    }
  }

  @OnChange('viewForm') saveView(): void {
    if (this.viewForm && this.viewForm.submitted) {
      // TODO: why do we need this in Electron? and only running live?
      // at worst, running in NgZone should work -- but otherwise a DOM
      // event is necessary to force change detection
      nextTick(() => {
        const visibility: ViewVisibility = { ...this.viewForm.visibility };
        this.store.dispatch(new UpdateVisibility({ visibility }));
      });
    }
  }

  // private methods

  private handleActions(): void {
    // listen for open prefs
    this.subToShowPagePrefs = this.actions$.pipe(ofAction(ShowPagePrefs))

@Input() ddb = { } as DDBStateModel;
  @Input() ddbschema = { } as Schema;
  @Input() ddbview = { } as View;
  @Input() prefs = { } as PrefsStateModel;

  schemes: Scheme[] = [];

  /** ctor */
  constructor(private dictSvc: DictionaryService) {
    super();
  }

  // bind OnChange handlers

  @OnChange('ddb', 'ddbschema', 'ddbview') newState(): void {
    if (this.ddb && this.ddbschema && this.ddbview)
      this.schemes = this.dictSvc.schemaForView(this.ddb, this.ddbschema, this.ddbview);
  }

}

selector: 'elfile-stack',
  templateUrl: 'stack.html',
  styleUrls: ['stack.scss']
})

export class StackComponent extends LifecycleComponent {

  @Input() prefs = { } as PrefsStateModel;
  @Input() redoStack: Operation[] = [];
  @Input() undoStack: Operation[] = [];

  zipped: Operation[][] = [];

  // bind OnChange handlers

  @OnChange('redoStack', 'undoStack') newState() {
    this.zipped = [];
    const max = Math.max(this.redoStack.length, this.undoStack.length);
    for (let ix = 0; ix < max; ix++) {
      const redo = (ix < this.redoStack.length)? this.redoStack[ix] : null;
      const undo = (ix < this.undoStack.length)? this.undoStack[ix] : null;
      this.zipped.push([redo, undo]);
    }
    this.zipped.reverse();
  }

}

this.viewForm.get('visibility').valueChanges
      .pipe(
        map(visibility => Object.entries(visibility)),
        map(entries => entries.some(entry => !!entry[1])),
        map(atLeastOne => atLeastOne? 'atLeastOne' : null)
      ).subscribe(atLeastOne => this.viewForm.get('atLeastOne').setValue(atLeastOne));
  }

  /** Close drawer */
  close(): void {
    this.drawerPanel.close();
  }

  // bind OnChange handlers

  @OnChange('s3view') newState(): void {
    if (this.s3view && this.s3view.visibility)
      this.viewForm.patchValue({ visibility: this.s3view.visibility });
  }

}