jQuery：角* ngIf指令内的访问元素

Question

I want to access an input element using jquery hidden inside an *ngIf directive. For a simple example :

...
export class ViewChannelScheduleComponent implements OnInit {

   someFunction() {
   ...
      doSomething($('#my-input'));
   ...
   }
}
...

<!-- and finally -->
<input id='my-input' />

The thing works great, until I decided to hide the component using *ngIf. Something like this..

...    
export class ViewChannelScheduleComponent implements OnInit {

   isInputVisible = false;

   ngOnInit() {
      this.isInputVisible = true;
      doSomething($('#my-input')); //unable to catch element
   }

}
...

<!-- and finally -->
<button (click)="showInputBox()">Enable</button>
<input *ngIf="isInputVisible" class='date-time-picker' />

I figured out that immediately after setting the isInputVisible value, jquery is unable to fetch the element. I verified the thing with a quick hack :

showInputBox() {
   this.isInputVisible = true;
   setTimeout(doSomething($('#my-input')), 100); //this works
}

Is there any neat way to ask jquery to wait for the element to be visible and callback?

Or any way to reference the input element directly in angular and convert it into jquery object within the function?

Answer 1

Let's ignore the part where you are using jquery inside angular and using an ID to reference the element ;) anyways, in your 2nd code example you are using ngOnInit . In this hook there are no template elements available yet. For that you have to go to the ngAfterViewInit hook.

But you cannot just change a view property inside that hook, this will give an expression has changed warning.

If you just want to use it in your showInputBox you can use the ChangeDetectorRef :

constructor(readonly cd: ChangeDetectorRef) {}

showInputBox() {
   this.isInputVisible = true;
   this.cd.detectChanges();
   doSomething($('#my-input');
}

Or just use a setTimeout like you already did, but then without the 100ms:

showInputBox() {
   this.isInputVisible = true;
   setTimeout(() => doSomething($('#my-input'));
}

This makes sure it goes to the next change detection loop