NileshPatel17 / ng-multiselect-dropdown

Multiple Select Dropdown Component
https://nileshpatel17.github.io/ng-multiselect-dropdown/
328 stars 289 forks source link

how to extends from your existing npm package in Angular? #389

Open ranouf opened 1 year ago

ranouf commented 1 year ago

I would like to extend your existing npm package (https://www.npmjs.com/package/ng-multiselect-dropdown) but I got an issue.

Here is my component which overrride the existing component:

import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { IDropdownSettings, MultiSelectComponent } from 'ng-multiselect-dropdown';
import { ListFilterPipe } from 'ng-multiselect-dropdown/list-filter.pipe';

@Component({
  selector: 'app-multiselect-dropdown',
  template: '<ng-content></ng-content>',
})
export class MultiselectDropdownComponent extends MultiSelectComponent implements OnInit {

  @Input() singleSelection?: boolean = false;
  [...]
  @Input() allowRemoteDataSearch?: boolean = false;

  constructor(
    listFilterPipe: ListFilterPipe,
    cdr: ChangeDetectorRef
  ) {
    super(listFilterPipe, cdr);
  }

  ngOnInit(): void {
    this.settings = {
      singleSelection: this.singleSelection,
      [...]
      allowRemoteDataSearch: this.allowRemoteDataSearch,
    } as IDropdownSettings;
  }
}

my module:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MultiselectDropdownComponent } from './multiselect-dropdown.component';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgMultiSelectDropDownModule.forRoot()
  ],
  declarations: [
    MultiselectDropdownComponent,
  ],
  exports: [
    MultiselectDropdownComponent
  ]
})

export class MultiSelectDropDownModule {
  static forRoot(): ModuleWithProviders<MultiSelectDropDownModule> {
    return {
      ngModule: MultiSelectDropDownModule
    };
  }
}

But I have an issue with the build:

./src/app/common/multiselect-dropdown/multiselect-dropdown.component.ts:3:0-63

  • Error: Module not found: Error: Can't resolve 'ng-multiselect-dropdown/list-filter.pipe' in 'D:\Source\Repos\Mentallys-Backend\src\client\src\app\common\multiselect-dropdown'

From my point of view, as I use NgMultiSelectDropDownModule.forRoot() in my module, I'm supposed to be able to use the list-filter.pipe. I guess the issue is the build is not able to find how to instanciate the constructor of my component. I added providers : [ListFilterPipe] in my module, but it didn't work too.

How to fix this issue?

Note: I posted on Stackoverflow too: https://stackoverflow.com/questions/75659218/how-to-extends-an-existing-npm-package-in-angular

ranouf commented 1 year ago

as @wei noticed it on stackoverflow, as list-filter.pipe is not added to export, it's not possible to inherite from ng-multiselect-dropdown. Could you add it?