Emojionearea won't get load if the input field is in *ngIf condition div in Angular.

[Arjun-Shinojiya]

I am currently trying to use emojionearea library. The library works fine with input which comes on pages init. In that jquery gets loaded and I can select emoji in such input field but I have some input which shows only after a particular button click. In such inputs, the library won't able to get loaded. Maybe this is issue with jquery or NgIf condition. Please let me know if any solution is available for it. I also tried to initiate emojionearea in ngViewAfterViewChecked() but still its not working.

 ngAfterViewChecked() {
    $("#emojioneArea").emojioneArea({
      pickerPosition: "bottom"
    });
  }

[sebsobseb]

Use angular [hidden]= instead of NgIf.

See: https://stackoverflow.com/a/35578093/5297218

[guicuton]

You can create a directive that will works great... I'm developed this directive:

app.directive('emojiArea', ['sessionService',function(s){
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope,element,attr){
      var l = JSON.parse(s.get('lang'));
      angular.element(element).emojioneArea({
        search: false,
        useInternalCDN: true,
        buttonTitle: l['generic']['emojiarea'],
        pickerPosition: "bottom",
        autocomplete: false
      });
    }
  }
}]);

And on my textarea i use:

<textarea emoji-area ng-model="obj.myText"></textarea>