CODEWITHSUNDEEP
angular
Pavan Jois
Pavan Jois

Reputation: 31

angular 2 performance issue in IE

My angular 2 application drop downs responds well in chrome but it is very slow in IE.I switched to prod mode and i used core-js instead of es6-shim.js but still IE drop down were too slow.Please help me how can I improve performace of angular 2 drop down in IE.

Upvotes: 1

Views: 2490

Answers (2)

Varsha
Varsha

Reputation: 966

1) This is not a permanent fix, but you can do something like create a ng:if where disabled the angular ui-select if the object is empty (e.g. no options selected). So for the directive to render a user must press on a button and then the UI renders. This prevents about 80% of the ui-selects from rendering on page.

Here is some sample code 

<ui-select ng:if="user.hasExtensions"
///
</ui-select>   
<span ng:if="!user.hasExtensions"
      ng:click="user.hasExtensions = true; refreshPlaceholder();"
      class="btn-info-callinize">
   <i class='icon-plus-sign icon-white'</i>
</span>

2) Other hack with this is if your listOfItems is too big.. you can use | limitTo: 100

3) To activate the dropdown select choice only after x letter are typed :

<ui-select-choices refresh="checkList($select.search)" refresh-delay="400" repeat="item.id as item in listOfItems | filter: {list: $select.search} | limitTo: limitlistsearch">

In controller

$scope.limitlistsearch = 100; //Init with no limit: to see a previous selected value

    $scope.checkList = function (stringTyped) {
        if (stringTyped.length >= 2) {
            $scope.limitlistsearch = 50;
        }
        else {
          $scope.limitlistsearch = 0;
        }
    }

4) Refer to this link (might helps) https://github.com/inetsys/ng-formalizer/commit/e18630297a50efaf0bb629cb26cfc6eea1d841d5

5) Switch to another component https://github.com/machineboy2045/angular-selectize

Disadvantage is that it is a wrapper to a Jquery based component, and does not offer all the themes options.

Advantages are - the directive is very very small, the configuration is mostly not in the HTML but in the controller, so the HTML is much easier to read, configure and REUSE. It also does not inherit Angular performance problems.

Upvotes: 1

Varsha
Varsha

Reputation: 966

I experienced the same issue and after throwing everything I could think of at it I've come to the conclusion that IE just doesn't want to handle updating filters when using selects.

My solution is to change your selects to look like this:

<select class="selectList" ng-model="selectedIds[$index]"  ng-options="sample.id as sample.value for sample in samples | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

They now have a class and an ng-change on them. Then in your controller do this fun little bit of code:

$scope.fixIE = function(){
    //here write code to check if IE so the other browsers don't get this ugly hack.
    var selectLists = document.querySelectorAll(".selectList");
    for(var x = 0;x  < selectLists.length; x++){
        selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]);
    }       
};

Same you can do in angular2, hope this helps. Just give a try. Something similar to this.. 

@Component({
  (...)
  template: `
    <select [ngModel]="selectedIds[$index]" (ngModelChange)="onChange($event)">
      <option *ngFor="#sample of samples">{{sample}}</option>
    </select>
  `)
  export class SomeComponent {

    onChange(newValue) {
      console.log(newValue);
      // ... do other stuff here ...
    }
  }

Upvotes: 1

Related Questions