ngx-select-dropdown - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

lib/ngx-select-dropdown.component.d.ts

 import { NgxDropdownConfig } from "./types/ngx-select-dropdown.types";
 import { SelectDropDownService } from "./ngx-select-dropdown.service";
-import { OnInit, EventEmitter, OnChanges, SimpleChanges, ElementRef, QueryList, AfterViewInit, ChangeDetectorRef } from "@angular/core";
+import { OnInit, EventEmitter, OnChanges, SimpleChanges, ElementRef, QueryList, AfterViewInit, ChangeDetectorRef, TemplateRef } from "@angular/core";
 import * as i0 from "@angular/core";
@@ -29,2 +29,10 @@ export declare class NgxSelectDropdownComponent implements OnInit, OnChanges, AfterViewInit {
     instanceId: any;
+    /** Template ref for the selected item */
+    selectedItemTemplate: TemplateRef<any>;
+    /** Template ref for the avilable item */
+    optionItemTemplate: TemplateRef<any>;
+    /** Template ref for the no matched found case */
+    notFoundTemplate: TemplateRef<any>;
+    /** Template ref for the button */
+    dropdownButtonTemplate: TemplateRef<any>;
     /**
@@ -87,3 +95,3 @@ * change event when value changes to provide user to handle things in change event
     /**
-     * Flag to indicate is the click initiation was on one of the availabe or selected options
+     * Flag to indicate that the click initiation was on one of the availabe or selected options
      * This is to track the mouse down event especially in Safari.
@@ -226,3 +234,3 @@ */
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxSelectDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSelectDropdownComponent, "ngx-select-dropdown", never, { "_value": "_value"; "options": "options"; "config": "config"; "multiple": "multiple"; "disabled": "disabled"; "instanceId": "instanceId"; }, { "change": "change"; "searchChange": "searchChange"; "open": "open"; "close": "close"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxSelectDropdownComponent, "ngx-select-dropdown", never, { "_value": "_value"; "options": "options"; "config": "config"; "multiple": "multiple"; "disabled": "disabled"; "instanceId": "instanceId"; "selectedItemTemplate": "selectedItemTemplate"; "optionItemTemplate": "optionItemTemplate"; "notFoundTemplate": "notFoundTemplate"; "dropdownButtonTemplate": "dropdownButtonTemplate"; }, { "change": "change"; "searchChange": "searchChange"; "open": "open"; "close": "close"; }, never, never, false>;
 }

package.json

 {
   "name": "ngx-select-dropdown",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "A angular(4+) select dropdown for single select or multiselct module.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -11,3 +11,3 @@ # ngx-select-dropdown
 
-`ngx-select-dropdown` Custom Dropdown component for Angular 4+ with multiple and single selection options
+`ngx-select-dropdown` Custom Dropdown component for Angular 4+ with multiple and single selection options, with customization options
 
@@ -24,2 +24,3 @@ ## Features
 * cross browser support
+* custom template options
 
@@ -71,3 +72,15 @@
 ````
+* use custom templates options like below. `item` and `config` variables available in the template context
+````
+<ng-template #optionTemplate let-item="item" let-config="config">
+  <i class="fa fa-plus"></i>
+  {{item.name}}
+  <span class="new badge"></span>
+</ng-template>
 
+<ngx-select-dropdown [optionItemTemplate]="optionTemplate" [selectedItemTemplate]="optionTemplate" tabindex="0" [multiple]="true" [(ngModel)]="modelVar" [options]="options"
+[config]="config">
+</ngx-select-dropdown>
+````
+
 ## Configuration
@@ -81,3 +94,7 @@
 * `instanceId: any` - instanceId of the dropdwon component instance.
-* `config: Object` - configuration object.
+* `config: NgxDropdownConfig` - configuration object.
+* `selectedItemTemplate: TemplateRef` - Custom template ref for the selected item
+* `optionItemTemplate: TemplateRef` - Custom template ref for the options items(available options)
+* `dropdownButtonTemplate: TemplateRef` - Custom template ref for the dropdwon button element
+* `notFoundTemplate: TemplateRef` - Custom template ref for the no matched found message
 ````
@@ -224,2 +241,7 @@ config = {
 ````
+* v3.3.0
+````
+Custom templates for available options, selected items and the dropdown button
+Other minor fixes
+````
 ## Help Improve
@@ -226,0 +248,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

341588

increased by5.31%

Lines of code

2944

increased by2.58%

Number of lines in readme file

254

increased by9.48%

No dependency changes