Update

Update

src/app/app.component.html

@@ -1,3 +1,4 @@
 <div>
   <fn-time-picker [index]="1"></fn-time-picker>
+  <fn-multi-time-picker [startIndex]="1"></fn-multi-time-picker>
 </div>

src/app/app.module.ts

@@ -3,15 +3,15 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { CustomTimePickerComponent } from './custom-time-picker/custom-time-picker.component';
 import { FnTimePickerComponent } from './time-picker/fn-time-picker.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { FnMultiTimePickerComponent } from './multi-time-picker/fn-multi-time-picker.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    CustomTimePickerComponent,
+    FnMultiTimePickerComponent,
     FnTimePickerComponent
 
   ],

src/app/multi-time-picker/fn-multi-time-picker.component.css

@@ -0,0 +1,33 @@
+.fn-time-picker-ul {
+  list-style: none;
+  border: 1px solid #ccc;
+  max-height: 160px;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+  overflow-y: scroll;
+  padding: 0;
+  margin: 0;
+  top: 0px;
+  width: 182px;
+  max-height: 160px;
+  overflow-y: scroll;
+}
+
+.fn-time-picker-ul li {
+  margin-bottom: 3px;
+  cursor: pointer;
+  padding: 5px;
+  background-color: #f3f3f3;
+}
+
+
+.fn-time-picker-ul li:last-child {
+  margin-bottom: 0;
+}
+
+/* .fn-time-picker-ul li:first-child{background-color: #777;color: #fff;} */
+.fn-time-picker-ul li:hover,
+.fn-time-picker-ul li.active {
+  background-color: rgb(119, 176, 241);
+  color: #fff;
+}

src/app/multi-time-picker/fn-multi-time-picker.component.html

@@ -0,0 +1,10 @@
+<div>
+  <input #inputValue [(ngModel)]="searchInputVal" [value]="showInputVal" (click)="openDropDown()"
+    (keydown)="keyDownChange($event)" maxlength="17" (keyup)="filterValue($event)" />
+  <div (click)="closeDropDown()">
+    <ul *ngIf="uiItemArray.length > 0 && showDropDown" class="fn-time-picker-ul">
+      <li *ngFor="let item of uiItemArray; let i = index" tabindex="{{i}}" [ngClass]="{'active': activeIndex === i  }"
+        (click)="selectedValueFunction(item)">{{item}}</li>
+    </ul>
+  </div>
+</div>