Jquery select in dart and angularjs 2

Question

I am working with Dart and Angularjs 2, I want to use select2 the view but it is not working, my code is:

code in html

<div class="form-group">
 <label for="nivelEducativo" class="col-sm-2 control-label">Nivel Educativo</label>
 <div class="col-sm-4">
 <select class="select_profession form-control" id="nivelEducativo" 
*ngIf="paramsByTypeCode != null" [(ngModel)]="model.situacionEducativaId">
     <option *ngFor="#param of paramsByTypeCode['PRT014']" 
    value="{{param.id}}">{{param.nombre}}</option>
 </select>
 </div>
</div>
...
<script>
  function __selectProfession(selector) {
    $(selector).select2({
    placeholder: "Select One",
    allowClear: true
  });
 }
</script>

code in Dart

  void ngAfterViewInit(){
    new Timer(new Duration(seconds: 1),()=>js.context.callMethod('__selectProfession',[".select_profession"]));
  }

The select2 doesn't work, but if I remove ngIf tag the select2 works but it doesn't show the list of professions, the select2 works well without angular2. I want to know,so how can I work with it?.

Thanks for all.

Answer 1

Instead of

*ngIf="paramsByTypeCode != null"

use

[hidden]="paramsByTypeCode == null"

Then the element exists even when paramsByTypeCode is null otherwise *ngIf removes it from the DOM and jQuery can't find it.

I'm not sure what the intention of this code is

 new Timer(new Duration(seconds: 1),()=>js.context.callMethod('__selectProfession',[".select_profession"]));

but I guess it should be

 new Future.delayed(new Duration(seconds: 1),()=>js.context.callMethod('__selectProfession',[".select_profession"]));