muhammadarsal/ng-select2

Angular 4 wrapper for jQuery select2

ng-select2's Issues

ivy renderer error - nullInjector Renderer

When setting Ivy enabled in the tsconfig.app.ts

"angularCompilerOptions": { "enableIvy": true },

I get the error "NullInjectorError: No provider for Renderer"
I think it's because this component still uses the Renderer instead of Renderer2

BUG? Options keeping the SELECTED value when they shouldn't

I noticed a problem when setting multiple values through the [value] input. Basically all the values that were selected previously remain selected even though I am sending an array WITHOUT those specific values.

The reason this happens? I have a good guess:

private setElementValue(newValue: string | string[]) {
    
    // this.zone.run(() => {
    
      if (Array.isArray(newValue)) {
    
        for (const option of this.selector.nativeElement.options) {
    
          if (newValue.indexOf(option.value) > -1) {
            this.renderer.setElementProperty(option, 'selected', 'true');
          }
        }
      }

      else {
        this.renderer.setElementProperty(this.selector.nativeElement, 'value', newValue);
      }
      
      if(this.element) {
        this.element.trigger('change.select2');
      } 
    // });
  }

That "IF" only checks if the value exists in the array, not the other way around, so if a value was removed for any reason it will remain with SELECTED = true because it fails the check in that IF.
My suggestion is to add an "ELSE" setting the option's SELECTED value to 'false', like this:

private setElementValue(newValue: string | string[]) {

    // this.zone.run(() => {

      if (Array.isArray(newValue)) {

        for (const option of this.selector.nativeElement.options) {

          if (newValue.indexOf(option.value) > -1) {
            this.renderer.setElementProperty(option, 'selected', true);
          } else {
            this.renderer.setElementProperty(option, 'selected', false);
          }
        }
      } else {
        this.renderer.setElementProperty(this.selector.nativeElement, 'value', newValue);
      }

      if (this.element) {
        this.element.trigger('change.select2');
      }
    // });
  }

I would love if it was possible to add this to the code ASAP, it's a necessity I currently have...
What do you think?

EDIT:
Actually no, this solution does not work...

EDIT 2:
It works, but the 'false' needs to be justfalse, without the ''

Code simplification

Hello again! Glad I could help with the previous issue.

While reviewing the code I noticed some lines that could be changed to make the code shorter and not as redundant in one case.
These changes are OPTIONAL and have no impact on the functionality of the select2, it might be just my OCD triggering when looking at that kind of things... Consider these to be suggestions.

Replace this:

    if (this.disabled) {
      this.renderer.setElementProperty(this.selector.nativeElement, 'disabled', this.disabled);
    }

with this:

      this.renderer.setElementProperty(this.selector.nativeElement, 'disabled', this.disabled);

Reason: this.disabled is set to false from the start and should always remain a boolean, so it's a bit redundant to test it before applying it to function, since the value should be converted into a boolean anyways. An exelent example of this "forced" conversion can be found in the code below, where the "false" needs to be simply the word false without the ' ' because the function would convert 'false' to true.
I even tried to pass undefined and null values to the function and it responded correctly by transforming the undefined into a false, so the "if" test is not needed.

Replace this:

          if (newValue.indexOf(option.value) > -1) {
            this.renderer.setElementProperty(option, 'selected', 'true');
          } else {
            this.renderer.setElementProperty(option, 'selected', false);
          }

with this:

  this.renderer.setElementProperty(option, 'selected', (newValue.indexOf(option.value) > -1));

Reason: The value passed to the function is applied directly from the "if" test, so we could skip the "if" and pass the comparison directly into the function's params. Might be harder to read for newcomers but testing a value to get a boolean and then pass that same boolean to a funcion looks like wasting time.

These changes have been tested and I found no issues on my end.

valueChange event emitting on setting value as Input

Setting value through property binding shouldn't emit valueChange event. It should only be emitted when value is changed by interacting with drop-down.

@types/select2 dependency error.

One of the dependency has updated their package, renaming Selection2Options to Options only so now, Select2Options emits error.

when using dynamic data, selected value doesn't show in the placeholder

If the data is fetched asynchronously and the value is set before the data arrives, the selected value is not shown in the placeholder.

valueChanged emits twice

When selecting a new value on the select, the valueChanged event is emitted twice:
One time on the ngAfterViewInit() via
this.element.on('select2:select select2:unselect', (e: any) => {...}
The other on the ngOnChanges(changes: SimpleChanges) via
if (changes['value'] && changes['value'].previousValue !== changes['value'].currentValue) {...}

ReferenceError: jQuery is not defined

bindLabel is not working with ng select2.How can we change label text to something else.?

multiple selection remove do not trigger valueChanged event

is it normal that no event is trigger when I remove an item of a multiselect dropdown ? How I can catch this event ?

'Select2Options' not found

Hi,

I'm using this package in my project. Till yesterday it was working fine. From today onward I'm getting the error like Cannot find name 'Select2Options'.

Could you please help me to resolve this issue

Thanks

Add custom class

I need to add custom class if value empty like bootstrap is-invalid

https://getbootstrap.com/docs/5.1/forms/validation/#custom-styles

TSLint errors

I get the following errors when compiling from tslint:

ERROR in node_modules/ng-select2/ng-select2/ng-select2.component.ts(20,3): error TS6133: 'Self' is declared but its value is never read.
node_modules/ng-select2/ng-select2/ng-select2.component.ts(22,51): error TS6133: 'NgControl' is declared but its value is never read.
node_modules/ng-select2/ng-select2/ng-select2.component.ts(75,11): error TS6133: 'style' is declared but its value is never read.

Module Build Failed Error: `index.ts is not part of the compilation output`

I'm getting the following error on build with angular 5:

node_modules/ng-select2/index.ts is not part of the compilation output. Please check the other error messages for details.

Can't find index.js of the module

Hi thx for this module but i have this error when i import it in my appmodule :

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/talibehackeur/Documents/projets-clients/prodispo-mobile/node_modules/ng-select2/index.js'

it try to find index.js bbut there is only index.ts
Thx

valueChange event emitting when data is changed

placeholder not working

Hi Devs,

I am using ng-select2 in my application. It's working very well in my all cases. The only pain point is placeholder not showing. I am using below code -

<ng-select2 [data]="exampleData"
[placeholder]="my placeholder"
[(ngModel)]="model.data"
[allowClear]="true"
[width]="300">

Language pt-BR

Não estou conseguindo usar a tradução para pt-BR. My options options: Select2Options = { language: 'pt-BR' }; and my tag <ng-select2 [data]="exampleData" [class]="'form-control'" [disabled]="!canEdit" [placeholder]="'Selecione uma cidade...'" [options]="options"> </ng-select2>