Searchable Dropdown
Searchable Dropdown is a combination of 2 controls.
1. Select
2. Search bar
Why Needed new Control
Select Control won’t allow the searching functionality.
Search Bar won’t allow the dropdown functionality.
How to implement a new control
To implement this new control, use the following steps:
Step 1: Go to Your Project Directory
![](https://lh6.googleusercontent.com/TRniqsXGsDV9rgoHySv8nCUqX0dHGDjskPoIk6l2a6aM2r9eeHctwVxWndaSXMeW_rcJ_IG3m_qUvmlJepeUQp38pfp1lkWWHFgyKoOK7__H-nZK26Dy63gPewO4BieChiGWzSvG9dUr0vvoUA)
Step 2: Install the package according to your “@angular/cli” version
![](https://lh3.googleusercontent.com/x-d9VG8CqE424IE0pXIzhTPgi59mrJ0fqvwIHDOd-f73QMErKaVJsnqx0NpSTELWpqilsmQBxUYinnas8ZADiPHBGLUvLH_h5U_1EtAM43drMR7EBgPQ6nXYEDPv6BccinwE9x6dyGueaCtFnA)
The above line is only applicable for @angular/cli version is 13.0.0 or above
Use the following table to know the version of the package. For your angular version
![](https://lh6.googleusercontent.com/RSbPYK_agPuwZycEYOSQftk0TmV034-K8DaoEANdPj-NCNJXPRkRqR6gQKPWg2t-UofUbVTFHDnBXMw7vl7g55xtD64w7YN9fXIrNX7V7JGLA2vYWBTQFkyK1L5GfIdtOiT-wrddrogrY3krXQ)
Use the following command to find out your angular version
![](https://lh4.googleusercontent.com/_C0atjnzTOhpd-j506kw9Y4WfBg6qN2Ghk7vz3n3ZXzdcl-xaLmuoIgTfCj4XSW8IRJPA417YBJ-ivS8SgG0_B1OYXdwrMw7GjZKc8wfMJ3u4bUwwKIevhohyHvKmx-X84RQ-fHiNaEZgyP0pg)
![](https://lh3.googleusercontent.com/xrucOok49VnBQaIP9194f1kWpIi_9UbPxSv5XXchfk1_mhZqmT1qcSKRDZq2_Z29QJSWOttHQ5Tql4qdrnW40avnYVGMh4lJbhP_u43AV9_A9VLnLpzTAdR7-dxjcsYY2n430K9rTh21o0fk5g)
After that use the following command
![](https://lh4.googleusercontent.com/XrBxQqfl4N03oseF4KKLaG2khr6OiuUMh4Kyy5FOVyfEFYcwd5vi8_MefCQ-judc71Krx3NbG2FrExy8Ml4ZlDYlFfCETljmy-nrQGE98wQ4zEYOZmAHpelr3fu_b_CAzPtcS5Dp6iRcgBbglw)
Step 3: Edit your project and add the following file as mentioned
Add the following things to your “app.module.ts” file
![](https://lh6.googleusercontent.com/xlTeDdt4CDWtveFWIWBfeRNgMwdhTpMLIz4muoMqqm3XT9zZHpfV00hZSTYIxFseKT2toc5ghrtKoy5zPsxFZIRTg0fB7VMbD2tOUkTsemQlx4kBQ-dL4DICMiI3qioefJBo5ooLxXQtUdqfHQ)
Now, add the following thing in “app.component.html”
![](https://lh6.googleusercontent.com/AqsFNwohuKGngiJZWaH4BhLzD7p104tBdh7wXOd_tbwCd5w_ITq3xMQHIIutrf53bQCEF6S4A1AtwkgMaTdOxQyj1KE-ewBeF9OsAyUVRgus83AYC-0htDxu2oOKyufQI6jL2CZ20AQPLAmv9A)
Add the following thing in “app.component.scss” (.css file)
![](https://lh3.googleusercontent.com/wX5EvdZ9fsbEiS8NUXtJFF_RhYnOQYQJwsRP3zTrokJ5vfuK2K0IEoXMN9S2jXjss5AM3BVSNMExA2QdmmMbG0WmZDZRU9Grc_vnmSbEuJL0FH28V2pWMC61KeDmMZ2v_rQ0qmx91lcLgKnqlg)
Now, add the following thing in “app.component.ts”
![](https://lh6.googleusercontent.com/BcRt295WysE3SLYgoDDjM_j--BBGcS1GgtEVNHwNCAQL1Pp9fUNxPVDu3c3NlwGVmm3kuMg-f8t08SH3xwh93dU0WlVV0Do1R54ou8LMpsPFWC1uvmHBCUAJTJV6uG5pxJHf2fqYnI2ngoEBqA)
Step 4: Checking for an Output
![](https://lh3.googleusercontent.com/lFob5ExMEbO1Mn0iiPjxUXbwKuowDOOiotnUho-X86M8fQN4pAPP7Fkk4m5qOf69A0GQG5GiMODUEIL2um3NbjiOT79zBMwy7mQekYKpJFmK1VA9F3uurDhlDEWy1KqoLTCLraeNyFqOiwNvmQ)
![](https://lh3.googleusercontent.com/BDbMK9RCyZPhkv16aE_1tE_JdyzTndvJnL_HVh4RV7h55EQFWqO6rm6EzC0ShmT4K2LCroYX3485T96etGtgHePpYmBmxKrxyy5HjWyOSMZsNKp-1UkvXxDKzfd405egpoZsHKvRH3LWDCNU7w)
![](https://lh5.googleusercontent.com/bOSmVNiShZNH_t48qrn-loOofKatzTUviRyLSzB1bZ-kRTDiWHPj8bjWw3XiYFMrjX35wjme35FKZOaWiDqVTIKLbKpuGwFi_obPIIx5i5HJzs7zpK7zQWWURVQc3YbmK-GYgOh1POqUR5H13w)
![](https://lh5.googleusercontent.com/MOrGQDvT7uTBuhlqgHK6ISxZhvGskjVywGeQ4EyCVS8sJWdlpCUMwKxEB0VkdA5yUCy501QZiicO0rOUreqp1tARAimzyaiCgUQKBEgf--CSAqswVabZ7WDI59lQD8NrXLhp2nG6knWtBZN4nQ)