Skip to content

Commit f899b4c

Browse files
NileshPatel17NileshPatel17
committed
fixed issues#16,17,18
1 parent 94aa1f9 commit f899b4c

11 files changed

+153
-139
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Angular multiselect dropdown component for web applications. Easy to integrate a
77

88
# [Demo](https://nileshpatel17.github.io/ng-multiselect-dropdown/)
99

10-
![demo](Screenshots/demo.gif)
10+
![demo](Screenshots/ng-multiselect-dropdown_v0.1.6.gif)
1111

1212
## Getting Started
1313

‎Screenshots/ng-multiselect-dropdown.mp4

1.62 MB
Binary file not shown.

‎Screenshots/ng-multiselect-dropdown_v0.1.6.gif

657 KB
Loading

‎package.json

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-multiselect-dropdown",
3-
"version": "0.1.5",
3+
"version": "0.1.6",
44
"private": true,
55
"description": "Angular Multi-Select Dropdown",
66
"author": "Nilesh Patel",
@@ -11,14 +11,12 @@
1111
"build": "ng build",
1212
"test": "ng test",
1313
"lint": "ng lint",
14-
"build:prod":
15-
"ng build --prod --base-href https://nileshpatel17.github.io/ng-multiselect-dropdown/",
14+
"build:prod": "ng build --prod --base-href https://nileshpatel17.github.io/ng-multiselect-dropdown/",
1615
"clear:lib": "rimraf dist-lib",
1716
"copyfiles": "copyfiles -u 1 ./dist-lib/**/*.* node_modules/ng-multiselect-dropdown",
1817
"build:lib": "yarn clear:lib && ng-packagr -p ng-package.json",
1918
"postbuild:lib": "yarn copyfiles",
20-
"prepublish":
21-
"yarn build:prod",
19+
"prepublish": "yarn build:prod",
2220
"publish": "ngh --no-silent false --name=\"nileshpatel17\" --email=\"nilesh.nvs@hotmail.com\"",
2321
"deploy":
2422
"ng build --prod --bh /ng-multiselect-dropdown/ && angular-cli-ghpages --no-silent --repo=https://github.com/NileshPatel17/ng-multiselect-dropdown.git --name=\"Nilesh Patel\" --email=nilesh.nvs@hotmail.com",

‎src/app/app.module.ts

+3-9
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
33
import { BrowserModule } from '@angular/platform-browser';
44

55
import { TabsModule, ButtonsModule } from 'ngx-bootstrap';
6-
import { NgMultiSelectDropDownModule } from '../ng-multiselect-dropdown/src';
7-
// import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
6+
// import { NgMultiSelectDropDownModule } from '../ng-multiselect-dropdown/src';
7+
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
88

99
import { SelectSectionComponent } from './components/select-section';
1010
import { SampleSectionComponent } from './components/sample-section.component';
@@ -15,13 +15,7 @@ import { ShCodeViewer } from '../code-viewer/code-viewer.module';
1515
import { AppComponent } from './app.component';
1616

1717
@NgModule({
18-
declarations: [
19-
SelectSectionComponent,
20-
SampleSectionComponent,
21-
SingleDemoComponent,
22-
MultipleDemoComponent,
23-
AppComponent
24-
],
18+
declarations: [SelectSectionComponent, SampleSectionComponent, SingleDemoComponent, MultipleDemoComponent, AppComponent],
2519
imports: [
2620
FormsModule,
2721
ReactiveFormsModule,

‎src/app/components/select/multiple-demo.html

+18-15
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,8 @@
33
<div class="col-md-4">
44
<h3>Select Multiple Cities</h3>
55
<form [formGroup]="myForm">
6-
<ng-multiselect-dropdown
7-
name="city"
8-
[placeholder]="'Select City'"
9-
[data]="cities"
10-
formControlName="city"
11-
[disabled]="disabled"
12-
[settings]="dropdownSettings"
13-
(onSelect)="onItemSelect($event)"
14-
(onSelectAll)="onSelectAll($event)">
6+
<ng-multiselect-dropdown name="city" [placeholder]="'Select City'" [data]="cities" formControlName="city" [disabled]="disabled"
7+
[settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
158
</ng-multiselect-dropdown>
169
</form>
1710
<p></p>
@@ -20,18 +13,28 @@ <h3>Select Multiple Cities</h3>
2013
<h3>Option</h3>
2114
<div class="checkbox">
2215
<label>
23-
<input type="checkbox" [checked]="ShowFilter" (change)="toogleShowFilter()"> Show Search filter
24-
</label>
16+
<input type="checkbox" [checked]="showAll" (change)="toogleShowAll()"> Show Select All
17+
</label>
2518
</div>
2619
<div class="checkbox">
2720
<label>
28-
<input type="checkbox" [checked]="disabled" [(ngModel)]="disabled"> Disabled
29-
</label>
21+
<input type="checkbox" [checked]="ShowFilter" (change)="toogleShowFilter()"> Show Search filter
22+
</label>
3023
</div>
3124
<div class="checkbox">
3225
<label>
33-
<input type="checkbox" [checked]="limitSelection" [(ngModel)]="limitSelection" (change)="handleLimitSelection()"> Limit Selection to 2
34-
</label>
26+
<input type="checkbox" [checked]="disabled" [(ngModel)]="disabled"> Disabled
27+
</label>
28+
</div>
29+
<div class="checkbox">
30+
<label>
31+
<input type="checkbox" [checked]="limitSelection" [(ngModel)]="limitSelection" (change)="handleLimitSelection()"> Limit Selection to 2
32+
</label>
33+
</div>
34+
<div class="checkbox">
35+
<label>
36+
<input type="button" (click)="handleReset()" value="reset">
37+
</label>
3538
</div>
3639
</div>
3740
</div>

‎src/app/components/select/multiple-demo.ts

+62-51
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@ import { FormBuilder, FormGroup } from '@angular/forms';
22
import { Component, OnInit } from '@angular/core';
33

44
@Component({
5-
selector: 'multiple-demo',
6-
templateUrl: './multiple-demo.html'
5+
selector: 'multiple-demo',
6+
templateUrl: './multiple-demo.html'
77
})
88
export class MultipleDemoComponent implements OnInit {
9-
myForm: FormGroup;
10-
disabled = false;
11-
ShowFilter = false;
12-
limitSelection = false;
13-
cities: Array<any> = [];
14-
selectedItems: Array<any> = [];
15-
dropdownSettings: any = {};
16-
htmlCode = `
9+
myForm: FormGroup;
10+
disabled = false;
11+
ShowFilter = false;
12+
showAll = true;
13+
limitSelection = false;
14+
cities: Array<any> = [];
15+
selectedItems: Array<any> = [];
16+
dropdownSettings: any = {};
17+
htmlCode = `
1718
&lt;form [formGroup]="myForm"&gt;
1819
&lt;ng-multiselect-dropdown
1920
name="city"
@@ -26,7 +27,7 @@ export class MultipleDemoComponent implements OnInit {
2627
&lt;/ng-multiselect-dropdown&gt;
2728
&lt;/form&gt;
2829
`;
29-
typescriptCode = `
30+
typescriptCode = `
3031
import { FormBuilder, FormGroup } from '@angular/forms';
3132
import { Component, OnInit } from '@angular/core';
3233
@@ -89,48 +90,58 @@ export class MultipleDemoComponent implements OnInit {
8990
}
9091
`;
9192

92-
constructor(private fb: FormBuilder) {}
93+
constructor(private fb: FormBuilder) {}
9394

94-
ngOnInit() {
95-
this.cities = [
96-
{ item_id: 1, item_text: 'New Delhi' },
97-
{ item_id: 2, item_text: 'Mumbai' },
98-
{ item_id: 3, item_text: 'Bangalore' },
99-
{ item_id: 4, item_text: 'Pune' },
100-
{ item_id: 5, item_text: 'Chennai' },
101-
{ item_id: 6, item_text: 'Navsari' }
102-
];
103-
this.selectedItems = [{ item_id: 4, item_text: 'Pune' }, { item_id: 6, item_text: 'Navsari' }];
104-
this.dropdownSettings = {
105-
singleSelection: false,
106-
idField: 'item_id',
107-
textField: 'item_text',
108-
selectAllText: 'Select All',
109-
unSelectAllText: 'UnSelect All',
110-
itemsShowLimit: 3,
111-
allowSearchFilter: this.ShowFilter
112-
};
113-
this.myForm = this.fb.group({
114-
city: [this.selectedItems]
115-
});
116-
}
95+
ngOnInit() {
96+
this.cities = [
97+
{ item_id: 1, item_text: 'New Delhi' },
98+
{ item_id: 2, item_text: 'Mumbai' },
99+
{ item_id: 3, item_text: 'Bangalore' },
100+
{ item_id: 4, item_text: 'Pune' },
101+
{ item_id: 5, item_text: 'Chennai' },
102+
{ item_id: 6, item_text: 'Navsari' }
103+
];
104+
this.selectedItems = [{ item_id: 4, item_text: 'Pune' }, { item_id: 6, item_text: 'Navsari' }];
105+
this.dropdownSettings = {
106+
singleSelection: false,
107+
idField: 'item_id',
108+
textField: 'item_text',
109+
selectAllText: 'Select All',
110+
unSelectAllText: 'UnSelect All',
111+
enableCheckAll: this.showAll,
112+
itemsShowLimit: 3,
113+
allowSearchFilter: this.ShowFilter
114+
};
115+
this.myForm = this.fb.group({
116+
city: [this.selectedItems]
117+
});
118+
}
117119

118-
onItemSelect(item: any) {
119-
console.log('onItemSelect', item);
120-
}
121-
onSelectAll(items: any) {
122-
console.log('onSelectAll', items);
123-
}
124-
toogleShowFilter() {
125-
this.ShowFilter = !this.ShowFilter;
126-
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
127-
}
120+
onItemSelect(item: any) {
121+
console.log('onItemSelect', item);
122+
}
123+
onSelectAll(items: any) {
124+
console.log('onSelectAll', items);
125+
}
128126

129-
handleLimitSelection() {
130-
if (this.limitSelection) {
131-
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
132-
} else {
133-
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
134-
}
127+
toogleShowAll() {
128+
this.showAll = !this.showAll;
129+
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { enableCheckAll: this.showAll });
130+
}
131+
toogleShowFilter() {
132+
this.ShowFilter = !this.ShowFilter;
133+
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
134+
}
135+
136+
handleLimitSelection() {
137+
if (this.limitSelection) {
138+
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
139+
} else {
140+
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
135141
}
142+
}
143+
144+
handleReset() {
145+
this.myForm.get('city').setValue([]);
146+
}
136147
}

‎src/app/components/select/single-demo.html

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div style="margin-bottom: 20px;">
2-
2+
33
<div class="row">
44
<div class="col-md-4">
55
<h3>Select a single city</h3>
@@ -9,22 +9,26 @@ <h3>Select a single city</h3>
99
</ng-multiselect-dropdown>
1010
</form>
1111
</div>
12-
<div class="col-md-8">
13-
<h3>Option</h3>
14-
<div class="checkbox">
15-
<label>
16-
<input type="checkbox" [checked]="closeDropdownSelection" (change)="toggleCloseDropdownSelection()">Close Dropdown on selection
17-
</label>
18-
</div>
19-
<div class="checkbox">
20-
<label>
21-
<input type="checkbox" [checked]="disabled" [(ngModel)]="disabled"> Disabled
22-
</label>
23-
</div>
12+
<div class="col-md-8">
13+
<h3>Option</h3>
14+
<div class="checkbox">
15+
<label>
16+
<input type="checkbox" [checked]="closeDropdownSelection" (change)="toggleCloseDropdownSelection()">Close Dropdown on selection
17+
</label>
18+
</div>
19+
<div class="checkbox">
20+
<label>
21+
<input type="checkbox" [checked]="disabled" [(ngModel)]="disabled"> Disabled
22+
</label>
23+
</div>
24+
<div class="checkbox">
25+
<label>
26+
<input type="button" (click)="handleReset()" value="reset">
27+
</label>
28+
</div>
2429
</div>
2530
</div>
2631
<p></p>
27-
<pre>Selected: {{selectedItem}}</pre>
2832
<div class="panel panel-default">
2933
<div class="panel-heading">Settings</div>
3034
<div class="panel-body">
@@ -33,7 +37,7 @@ <h3>Option</h3>
3337
</pre>
3438
</div>
3539
</div>
36-
<tabset>
40+
<tabset>
3741
<tab heading="Html">
3842
<sh-code-viewer [code]="htmlCode" [language]="'html'"></sh-code-viewer>
3943
</tab>

‎src/app/components/select/single-demo.ts

+32-27
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: 'single-demo',
5-
templateUrl: './single-demo.html'
4+
selector: 'single-demo',
5+
templateUrl: './single-demo.html'
66
})
77
export class SingleDemoComponent implements OnInit {
8-
cities: Array<string> = [];
9-
selectedItem: Array<string> = [];
10-
dropdownSettings: any = {};
11-
closeDropdownSelection = false;
12-
disabled = false;
13-
htmlCode = `
8+
cities: Array<string> = [];
9+
selectedItem: Array<string> = [];
10+
dropdownSettings: any = {};
11+
closeDropdownSelection = false;
12+
disabled = false;
13+
htmlCode = `
1414
&lt;ng-multiselect-dropdown
1515
name="city"
1616
[data]="cities"
@@ -20,7 +20,7 @@ export class SingleDemoComponent implements OnInit {
2020
[disabled]="disabled"
2121
&lt;/ng-multiselect-dropdown&gt;
2222
`;
23-
typescriptCode = `
23+
typescriptCode = `
2424
import { Component, OnInit } from '@angular/core';
2525
2626
@Component({
@@ -58,24 +58,29 @@ export class SingleDemoComponent implements OnInit {
5858
}
5959
`;
6060

61-
ngOnInit() {
62-
this.cities = ['Mumbai', 'New Delhi', 'Bangaluru', 'Pune', 'Navsari'];
63-
this.selectedItem = ['Mumbai'];
64-
this.dropdownSettings = {
65-
singleSelection: true,
66-
selectAllText: 'Select All',
67-
unSelectAllText: 'UnSelect All',
68-
allowSearchFilter: true,
69-
closeDropDownOnSelection: this.closeDropdownSelection
70-
};
71-
}
61+
ngOnInit() {
62+
this.cities = ['Mumbai', 'New Delhi', 'Bangaluru', 'Pune', 'Navsari'];
7263

73-
onItemSelect(item: any) {
74-
console.log('onItemSelect', item);
75-
}
64+
this.dropdownSettings = {
65+
singleSelection: true,
66+
selectAllText: 'Select All',
67+
unSelectAllText: 'UnSelect All',
68+
allowSearchFilter: true,
69+
closeDropDownOnSelection: this.closeDropdownSelection
70+
};
71+
this.selectedItem = ['Mumbai'];
72+
}
7673

77-
toggleCloseDropdownSelection() {
78-
this.closeDropdownSelection = !this.closeDropdownSelection;
79-
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { closeDropDownOnSelection: this.closeDropdownSelection });
80-
}
74+
onItemSelect(item: any) {
75+
console.log('onItemSelect', item);
76+
}
77+
78+
toggleCloseDropdownSelection() {
79+
this.closeDropdownSelection = !this.closeDropdownSelection;
80+
this.dropdownSettings = Object.assign({}, this.dropdownSettings, { closeDropDownOnSelection: this.closeDropdownSelection });
81+
}
82+
83+
handleReset() {
84+
this.selectedItem = [];
85+
}
8186
}

‎src/ng-multiselect-dropdown/src/multi-select.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
</div>
1515

1616
<div class="dropdown-list" [hidden]="!isDropdownOpen">
17-
<ul *ngIf="_settings.enableCheckAll && !_settings.limitSelection">
18-
<li (click)="toggleSelectAll()" *ngIf="_data.length > 0 && !_settings.singleSelection" class="multiselect-item-checkbox"
17+
<ul *ngIf="!_settings.limitSelection">
18+
<li (click)="toggleSelectAll()" *ngIf="!_settings.singleSelection && _settings.enableCheckAll && _data.length > 0" class="multiselect-item-checkbox"
1919
style="border-bottom: 1px solid #ccc;padding:10px">
2020
<input type="checkbox" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached()" />
2121
<div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>

0 commit comments

Comments
 (0)