order list showing from and to date

src/app/pages/order/order.component.html

@@ -11,9 +11,9 @@
           <div style="    text-align: end;"> 
             <!-- <button  (click)="Assign()" nbButton status="primary" hero>
               Assign Driver
-              </button> -->
-              <input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker">
-              <nb-rangepicker #formpicker  (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate"></nb-rangepicker>
+              </button> --> 
+              <input nbInput placeholder="Pick Date Range" [nbDatepicker]="formpicker" [(ngModel)]="dateRangeValue"  #dateRangeInput>
+              <nb-rangepicker #formpicker (rangeChange)="manipulateDate($event)"[startDate]="defaultStartDate" [endDate]="defaultEndDate" ></nb-rangepicker>
               
               <!-- <input  nbInput class="fx-date-range" type="text" 
               ngxDaterangepickerMd
@@ -58,7 +58,12 @@
       </div>
     </nb-card-header>
   
-    <nb-card-body>
+    <nb-card-body style="padding-top: 0px;">
+      <div style="text-align: center;padding: 10px;"> 
+        <span *ngIf="selectedDate == undefined || selectedDate == {}" style="color:#3366ff;">Showing data from {{selectedDateRange.startDate | date:'MMM d, y'}} to {{selectedDateRange.endDate | date:'MMM d, y'}}</span>
+        <span *ngIf="selectedDate != undefined" style="color: #3366ff;">Showing data from {{selectedDate.fromDate | date:'MMM d, y'}} to {{selectedDate.toDate | date:'MMM d, y'}}</span>
+      </div>
+      
         <!-- <ng2-smart-table [settings]="settings"   (userRowSelect)="onUserRowSelect($event)" [source]="source" (edit)="onSaveConfirm($event)"
         (create)="onCreateConfirm($event)" (delete)="onDeleteConfirm($event)">
         </ng2-smart-table> -->