diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
index 33734e9..e45ecfc 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/multi-select/multi-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { SelectLabelTemplateDirective } from '../select-label-template.directive';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -17,7 +17,7 @@ import { SelectOptionTemplateDirective } from '../select-option-template.directi
 }],
   styleUrls: ['./multi-select.component.scss']
 })
-export class MultiSelectComponent implements OnInit {
+export class MultiSelectComponent implements OnInit,OnDestroy {
 
   
   @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
@@ -74,9 +74,6 @@ export class MultiSelectComponent implements OnInit {
   ngOnInit(): void {
     this.dataFetching();    
     this.detectLoading();
-
-    console.log(this.serverFiltering);
-
     if(this.serverFiltering){
       this.searchOnServer();
     }else{
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
index ae8ca06..9b3cb33 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef } from '@angular/core';
+import { Component, OnInit, ContentChild, ViewChild, Input, Output, EventEmitter, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
 import { SelectLabelTemplateDirective } from '../select-label-template.directive';
 import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -19,7 +19,7 @@ import { NotFoundTemplateDirective } from '../not-found-template.directive';
 }],
   styleUrls: ['./ng-select.component.scss']
 })
-export class NgSelectComponent implements OnInit {
+export class NgSelectComponent implements OnInit,OnDestroy {
 
   @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
   @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
@@ -80,8 +80,6 @@ export class NgSelectComponent implements OnInit {
     this.dataFetching();    
     this.detectLoading();
 
-    console.log(this.serverFiltering);
-
     if(this.serverFiltering){
       this.searchOnServer();
     }else{
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html
index ac319c2..ce785ac 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.html
@@ -1,19 +1,25 @@
 <ng-template #popTemplate>
     <div class="container" >
       <div class="row">
-        <div class="form-group">
-          <input type="text"
+        <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
+            <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+        </select>    
+    </div>
+      <div class="row mt-1 mb-1">
+          <input *ngIf="filterType =='GreaterThan' || filterType == 'LessThan'" type="text"
                  placeholder="Datepicker"
                  class="form-control"
-                 bsDatepicker [(ngModel)]="filterValue">
-        </div>
-      </div>
-      <div class="row">
-        <input type="text"
-      placeholder="Daterangepicker"
-      class="form-control"
-      bsDaterangepicker>
+                 bsDatepicker [(ngModel)]="filterValue"> 
       </div>
+      <div class="row mt-1 mb-1">
+        <input *ngIf="filterType =='Equal'" type="text"
+        placeholder="Daterangepicker"
+        class="form-control"
+        bsDaterangepicker [(ngModel)]="filterValue">       
+    </div>
+
+     
+     
       <div class="row mt-2">
         <button class="btn btn-primary mr-1" >Filter</button>
         <button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
index 5c8c5ec..1fa81c8 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/datetime-filter/data-source-datetime-filter.component.ts
@@ -16,6 +16,10 @@ export class DataSourceDatetimeFilterComponent {
   filterType: string = 'Equal';
   filterTypes = [
     {key:'equal', value: 'Equal'},
+    {key:'Greater Than', value: 'GreaterThan'},
+    {key:'Less Than', value: 'LessThan'},    
+    {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
+    {key:'Less Than Equal', value: 'LessThanOrEqual'},    
   ];
 
 
@@ -31,7 +35,7 @@ export class DataSourceDatetimeFilterComponent {
     return "Filter by "+ this.path;
   }
 
-  applyFilter(){debugger;
+  applyFilter(){
     this.isFiltering = true;
     const filters = this.dataSource.filters;
     const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html
index d797b24..76e11e8 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/number-filter/data-source-number-filter.component.html
@@ -8,7 +8,7 @@
             </div>
            
             <div class="row mt-1 mb-1">
-                <input type="number" class="form-control" placeholder="column value" aria-label="number"
+                <input type="number" class="form-control" placeholder="Value" aria-label="number"
             aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
             </div>
             
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html
index 28aa89f..08b65cc 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/dataSource-filter/text-filter/data-source-text-filter.component.html
@@ -10,7 +10,7 @@
             </div>
         
             <div class="row mt-1 mb-1">
-                <input type="text" class="form-control" placeholder="column value" aria-label="Username"
+                <input type="text" class="form-control" placeholder="Value" aria-label="Username"
             aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}" >
             </div>
             
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
index b08ce0c..f1c3a92 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/form-group-command-modal/form-group-command-modal/form-group-command-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef } from '@angular/core';
+import { Component, OnInit, TemplateRef, OnDestroy } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { IDataSource } from '@poweredsoft/data';
 import { finalize } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { FormGroup, FormControl } from '@angular/forms';
   templateUrl: './form-group-command-modal.component.html',
   styleUrls: ['./form-group-command-modal.component.scss']
 })
-export class FormGroupCommandModalComponent implements OnInit {
+export class FormGroupCommandModalComponent implements OnInit, OnDestroy {
 
 
   modelForm: FormGroup;
diff --git a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
index f0263ec..ebc157f 100644
--- a/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
+++ b/src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.ts
@@ -1,23 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ps-command-modal-demo',
   templateUrl: './command-modal-demo.component.html',
   styleUrls: ['./command-modal-demo.component.scss']
 })
-export class CommandModalDemoComponent implements OnInit {
+export class CommandModalDemoComponent implements OnInit,OnDestroy {
 
   columns = ['id','name', 'address', 'commands'];
   pages:any;
   merchantDataSource: IDataSource<IMerchant>;  
+  private _dataSubscription: Subscription;
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
 
   }
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
 
   newMerchant(name: string) {
     this.merchantDataSource.executeCommandByName('addMerchant', {
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
index b6307fc..b9d5dcb 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
@@ -1,22 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { DataSource, IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
 import { MerchantService } from 'src/app/data/services/merchant.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ps-data-grid-demo-home',
   templateUrl: './data-grid-demo-home.component.html',
   styleUrls: ['./data-grid-demo-home.component.scss']
 })
-export class DataGridDemoHomeComponent implements OnInit {
+export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
 
   title = 'cdkDemo';
   columns = ['id','name', 'address', 'commands']
   merchantDataSource: IDataSource<IMerchant>;  
+  private _dataSubscription: Subscription;
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
 
   }
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
 
   
 
diff --git a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
index d6fb703..f6e872a 100644
--- a/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
+++ b/src/app/form-group-modal-demo/form-group-modal-demo/form-group-modal-demo.component.ts
@@ -1,16 +1,18 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
 import { IModelFormCreateEvent } from 'projects/poweredsoft/ngx-bootstrap/src/public-api';
+import { Subscription } from 'rxjs';
+import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 
 @Component({
   selector: 'ps-form-group-modal-demo',
   templateUrl: './form-group-modal-demo.component.html',
   styleUrls: ['./form-group-modal-demo.component.scss']
 })
-export class FormGroupModalDemoComponent implements OnInit {
+export class FormGroupModalDemoComponent implements OnInit,OnDestroy {
  
   createDataSource(): IDataSource<IMerchant> {
     return this.merchantService.createDataSource();
@@ -18,10 +20,14 @@ export class FormGroupModalDemoComponent implements OnInit {
 
   pages:any;
   merchantDataSource: IDataSource<IMerchant>;
+  private _dataSubscription: Subscription;
   columns = ['id','name', 'address', 'actions'];
   constructor(private merchantService: MerchantService, private fb: FormBuilder) {
     this.merchantDataSource = this.createDataSource();
    }
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
 
   ngOnInit(): void {
     this.merchantDataSource.refresh();
diff --git a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts
index 6bd9dd1..d950b97 100644
--- a/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts
+++ b/src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts
@@ -15,7 +15,6 @@ export class GridFilterDemoComponent implements OnInit {
   merchantDataSource: IDataSource<IMerchant>;  
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
-    console.log(this.merchantDataSource);    
   }
 
   pages:any;
diff --git a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
index b00831b..4da193d 100644
--- a/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
+++ b/src/app/pagination-demo/pagination-demo/pagination/pagination-demo.component.ts
@@ -1,22 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 import { FormBuilder, Validators } from '@angular/forms';
 import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ps-pagination',
   templateUrl: './pagination-demo.component.html',
   styleUrls: ['./pagination-demo.component.scss']
 })
-export class PaginationDemoComponent implements OnInit {
+export class PaginationDemoComponent implements OnInit, OnDestroy {
   columns = ['id','name', 'address','commands']
   merchantDataSource: IDataSource<IMerchant>;  
+  private _dataSubscription: Subscription;
   constructor(private  merchantService: MerchantService, private confirmModalService: ConfirmModalService){
     this.merchantDataSource = this.createDataSource();
 
   }
+  ngOnDestroy(): void {
+    this._dataSubscription.unsubscribe();
+  }
 
   pages:any;