Introduction

Ngx-Bootstrap has released a package of open-source tools which is native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article we will learn about Typehead component which is a cool feature of Ngx-bootstrap.

What is Typeahead?

Typeahead - also known as autocomplete or autosuggest is a language prediction tool that many search interfaces use to provide suggestions for users as they type in a textbox.This is a method for searching and filtering through text. It is also sometimes known as autocomplete, incremental search, search-as-you-type and inline search.
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
Let's create a new Angular project using the following NPM command,
  1. ng new typehead-example
Step 2
Now, let's create a new component by using the following command,
  1. ng g c ngx-bootstrap-typehead
Step 3
Install ngx-bootstrap from npm by using the folowing command.
  1. npm install ngx-bootstrap --save
Or
  1. ng add ngx-bootstrap --component typeahead
This will be added to our root module
Step 4
Now let's add bootstrap styles in our index.html file .
For Bootstrap 3,
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
For Bootstrap 4
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
Step 5
Let add the template in our ngx-bootstrap-typehead.component.html.
  1. <h2>Example of Ngx-Bootstrap Typehead</h2>
  2. <div style="width: fit-content;margin: auto;margin-top: 18px;">
  4. <pre style="background-color: antiquewhite;" class="card card-block card-header mb-3">Selected option: {{selectedOption | json}}</pre>
  6. <input [(ngModel)]="selectedValue" [typeahead]="countries" typeaheadOptionField="name" [typeaheadScrollable]="true"
  7. (typeaheadOnSelect)="onSelect($event)" class="form-control">
  9. </div>
Step 6
Now, open the ngx-bootstrap-typehead.component.ts file and add the following code in this file,
  1. import { Component } from '@angular/core';
  2. import { TypeaheadMatch } from 'ngx-bootstrap/typeahead/typeahead-match.class';
  4. @Component({
  5. selector: 'app-ngx-bootstrap-typeahead',
  6. templateUrl: './ngx-bootstrap-typeahead.component.html'
  7. })
  8. export class NgxBootstrapTypeaheadComponent {
  9. selectedValue: string;
  10. selectedOption: any;
  11. countries: any[] = [
  12. {
  13. "name": "Afghanistan",
  14. "phoneCode": "+93",
  15. "alpha2code": "AF",
  16. "alpha3code": "AFG"
  17. },
  18. {
  19. "name": "Albania",
  20. "phoneCode": "+355",
  21. "alpha2code": "AL",
  22. "alpha3code": "ALB"
  23. },
  24. {
  25. "name": "Algeria",
  26. "phoneCode": "+213",
  27. "alpha2code": "DZ",
  28. "alpha3code": "DZA"
  29. },
  30. {
  31. "name": "American Samoa",
  32. "phoneCode": "+1",
  33. "alpha2code": "AS",
  34. "alpha3code": "ASM"
  35. },
  36. {
  37. "name": "Andorra",
  38. "phoneCode": "+376",
  39. "alpha2code": "AD",
  40. "alpha3code": "AND"
  41. },
  42. {
  43. "name": "Angola",
  44. "phoneCode": "+244",
  45. "alpha2code": "AO",
  46. "alpha3code": "AGO"
  47. },
  48. {
  49. "name": "Anguilla",
  50. "phoneCode": "+1",
  51. "alpha2code": "AI",
  52. "alpha3code": "AIA"
  53. },
  54. {
  55. "name": "Antigua and Barbuda",
  56. "phoneCode": "+1",
  57. "alpha2code": "AG",
  58. "alpha3code": "ATG"
  59. },
  60. {
  61. "name": "Argentina",
  62. "phoneCode": "+54",
  63. "alpha2code": "AR",
  64. "alpha3code": "ARG"
  65. },
  66. {
  67. "name": "Armenia",
  68. "phoneCode": "+374",
  69. "alpha2code": "AM",
  70. "alpha3code": "ARM"
  71. },
  72. {
  73. "name": "Aruba",
  74. "phoneCode": "+297",
  75. "alpha2code": "AW",
  76. "alpha3code": "ABW"
  77. },
  78. {
  79. "name": "Australia",
  80. "phoneCode": "+61",
  81. "alpha2code": "AU",
  82. "alpha3code": "AUS"
  83. },
  84. {
  85. "name": "Austria",
  86. "phoneCode": "+43",
  87. "alpha2code": "AT",
  88. "alpha3code": "AUT"
  89. },
  90. {
  91. "name": "Azerbaijan",
  92. "phoneCode": "+994",
  93. "alpha2code": "AZ",
  94. "alpha3code": "AZE"
  95. },
  96. {
  97. "name": "Bahrain",
  98. "phoneCode": "+973",
  99. "alpha2code": "BH",
  100. "alpha3code": "BHR"
  101. },
  102. {
  103. "name": "Bangladesh",
  104. "phoneCode": "+880",
  105. "alpha2code": "BD",
  106. "alpha3code": "BGD"
  107. },
  108. {
  109. "name": "Barbados",
  110. "phoneCode": "+1",
  111. "alpha2code": "BB",
  112. "alpha3code": "BRB"
  113. },
  114. {
  115. "name": "Belarus",
  116. "phoneCode": "+375",
  117. "alpha2code": "BY",
  118. "alpha3code": "BLR"
  119. },
  120. {
  121. "name": "Belgium",
  122. "phoneCode": "+32",
  123. "alpha2code": "BE",
  124. "alpha3code": "BEL"
  125. },
  126. {
  127. "name": "Belize",
  128. "phoneCode": "+501",
  129. "alpha2code": "BZ",
  130. "alpha3code": "BLZ"
  131. },
  132. {
  133. "name": "Benin",
  134. "phoneCode": "+229",
  135. "alpha2code": "BJ",
  136. "alpha3code": "BEN"
  137. },
  138. {
  139. "name": "Bermuda",
  140. "phoneCode": "+1",
  141. "alpha2code": "BM",
  142. "alpha3code": "BMU"
  143. },
  144. {
  145. "name": "Bhutan",
  146. "phoneCode": "+975",
  147. "alpha2code": "BT",
  148. "alpha3code": "BTN"
  149. },
  150. {
  151. "name": "Bolivia",
  152. "phoneCode": "+591",
  153. "alpha2code": "BO",
  154. "alpha3code": "BOL"
  155. },
  156. {
  157. "name": "Bonaire, Sint Eustatius and Saba",
  158. "phoneCode": "+599",
  159. "alpha2code": "BQ",
  160. "alpha3code": "BES"
  161. },
  162. {
  163. "name": "Bosnia and Herzegovina",
  164. "phoneCode": "+387",
  165. "alpha2code": "BA",
  166. "alpha3code": "BIH"
  167. },
  168. {
  169. "name": "Botswana",
  170. "phoneCode": "+267",
  171. "alpha2code": "BW",
  172. "alpha3code": "BWA"
  173. },
  174. {
  175. "name": "Brazil",
  176. "phoneCode": "+55",
  177. "alpha2code": "BR",
  178. "alpha3code": "BRA"
  179. },
  180. {
  181. "name": "British Indian Ocean Territory",
  182. "phoneCode": "+246",
  183. "alpha2code": "IO",
  184. "alpha3code": "IOT"
  185. },
  186. {
  187. "name": "British Virgin Islands",
  188. "phoneCode": "+1",
  189. "alpha2code": "VG",
  190. "alpha3code": "VGB"
  191. },
  192. {
  193. "name": "Brunei Darussalam",
  194. "phoneCode": "+673",
  195. "alpha2code": "BN",
  196. "alpha3code": "BRN"
  197. },
  198. {
  199. "name": "Bulgaria",
  200. "phoneCode": "+359",
  201. "alpha2code": "BG",
  202. "alpha3code": "BGR"
  203. },
  204. {
  205. "name": "Burkina Faso",
  206. "phoneCode": "+226",
  207. "alpha2code": "BF",
  208. "alpha3code": "BFA"
  209. },
  210. {
  211. "name": "Myanmar",
  212. "phoneCode": "+95",
  213. "alpha2code": "MM",
  214. "alpha3code": "MMR"
  215. },
  216. {
  217. "name": "Burundi",
  218. "phoneCode": "+257",
  219. "alpha2code": "BI",
  220. "alpha3code": "BDI"
  221. },
  222. {
  223. "name": "Cambodia",
  224. "phoneCode": "+855",
  225. "alpha2code": "KH",
  226. "alpha3code": "KHM"
  227. },
  228. {
  229. "name": "Cameroon",
  230. "phoneCode": "+237",
  231. "alpha2code": "CM",
  232. "alpha3code": "CMR"
  233. },
  234. {
  235. "name": "Canada",
  236. "phoneCode": "+1",
  237. "alpha2code": "CA",
  238. "alpha3code": "CAN"
  239. },
  240. {
  241. "name": "Cabo Verde",
  242. "phoneCode": "+238",
  243. "alpha2code": "CV",
  244. "alpha3code": "CPV"
  245. },
  246. {
  247. "name": "Cayman Islands",
  248. "phoneCode": "+1",
  249. "alpha2code": "KY",
  250. "alpha3code": "CYM"
  251. },
  252. {
  253. "name": "Central African Republic",
  254. "phoneCode": "+236",
  255. "alpha2code": "CF",
  256. "alpha3code": "CAF"
  257. },
  258. {
  259. "name": "Chad",
  260. "phoneCode": "+235",
  261. "alpha2code": "ID",
  262. "alpha3code": "TCD"
  263. },
  264. {
  265. "name": "Chile",
  266. "phoneCode": "+56",
  267. "alpha2code": "CL",
  268. "alpha3code": "CHL"
  269. },
  270. {
  271. "name": "China",
  272. "phoneCode": "+86",
  273. "alpha2code": "CN",
  274. "alpha3code": "CHN"
  275. },
  276. {
  277. "name": "Colombia",
  278. "phoneCode": "+57",
  279. "alpha2code": "CO",
  280. "alpha3code": "COL"
  281. },
  282. {
  283. "name": "Comoros",
  284. "phoneCode": "+269",
  285. "alpha2code": "KM",
  286. "alpha3code": "COM"
  287. },
  288. {
  289. "name": "Cook Islands",
  290. "phoneCode": "+682",
  291. "alpha2code": "CK",
  292. "alpha3code": "COK"
  293. },
  294. {
  295. "name": "Costa Rica",
  296. "phoneCode": "+506",
  297. "alpha2code": "CR",
  298. "alpha3code": "CRI"
  299. },
  300. {
  301. "name": "Côte dIvoire",
  302. "phoneCode": "+225",
  303. "alpha2code": "CI",
  304. "alpha3code": "CIV"
  305. },
  306. {
  307. "name": "Croatia",
  308. "phoneCode": "+385",
  309. "alpha2code": "HR",
  310. "alpha3code": "HRV"
  311. },
  312. {
  313. "name": "Cuba",
  314. "phoneCode": "+53",
  315. "alpha2code": "CU",
  316. "alpha3code": "CUB"
  317. },
  318. {
  319. "name": "Curaçao",
  320. "phoneCode": "+599",
  321. "alpha2code": "CW",
  322. "alpha3code": "CUW"
  323. },
  324. {
  325. "name": "Cyprus",
  326. "phoneCode": "+357",
  327. "alpha2code": "CY",
  328. "alpha3code": "CYP"
  329. },
  330. {
  331. "name": "Czechia",
  332. "phoneCode": "+420",
  333. "alpha2code": "CZ",
  334. "alpha3code": "CZE"
  335. },
  336. {
  337. "name": "Denmark",
  338. "phoneCode": "+45",
  339. "alpha2code": "DK",
  340. "alpha3code": "DNK"
  341. },
  342. {
  343. "name": "Djibouti",
  344. "phoneCode": "+253",
  345. "alpha2code": "DJ",
  346. "alpha3code": "DJI"
  347. },
  348. {
  349. "name": "Dominica",
  350. "phoneCode": "+1",
  351. "alpha2code": "DM",
  352. "alpha3code": "DMA"
  353. },
  354. {
  355. "name": "Dominican Republic",
  356. "phoneCode": "+1",
  357. "alpha2code": "DO",
  358. "alpha3code": "DOM"
  359. },
  360. {
  361. "name": "Ecuador",
  362. "phoneCode": "+593",
  363. "alpha2code": "EC",
  364. "alpha3code": "ECU"
  365. },
  366. {
  367. "name": "Egypt",
  368. "phoneCode": "+20",
  369. "alpha2code": "EG",
  370. "alpha3code": "EGY"
  371. },
  372. {
  373. "name": "El Salvador",
  374. "phoneCode": "+503",
  375. "alpha2code": "SV",
  376. "alpha3code": "SLV"
  377. },
  378. {
  379. "name": "Equatorial Guinea",
  380. "phoneCode": "+240",
  381. "alpha2code": "GQ",
  382. "alpha3code": "GNQ"
  383. },
  384. {
  385. "name": "Eritrea",
  386. "phoneCode": "+291",
  387. "alpha2code": "ER",
  388. "alpha3code": "ERI"
  389. },
  390. {
  391. "name": "Estonia",
  392. "phoneCode": "+372",
  393. "alpha2code": "EE",
  394. "alpha3code": "EST"
  395. },
  396. {
  397. "name": "Ethiopia",
  398. "phoneCode": "+251",
  399. "alpha2code": "ET",
  400. "alpha3code": "ETH"
  401. },
  402. {
  403. "name": "Falkland Islands",
  404. "phoneCode": "+500",
  405. "alpha2code": "FK",
  406. "alpha3code": "FLK"
  407. },
  408. {
  409. "name": "Faroe Islands",
  410. "phoneCode": "+298",
  411. "alpha2code": "FO",
  412. "alpha3code": "FRO"
  413. },
  414. {
  415. "name": "Federated States of Micronesia",
  416. "phoneCode": "+691",
  417. "alpha2code": "FM",
  418. "alpha3code": "FSM"
  419. },
  420. {
  421. "name": "Fiji",
  422. "phoneCode": "+679",
  423. "alpha2code": "FJ",
  424. "alpha3code": "FJI"
  425. },
  426. {
  427. "name": "Finland",
  428. "phoneCode": "+358",
  429. "alpha2code": "FI",
  430. "alpha3code": "FIN"
  431. },
  432. {
  433. "name": "France",
  434. "phoneCode": "+33",
  435. "alpha2code": "FR",
  436. "alpha3code": "FRA"
  437. },
  438. {
  439. "name": "French Guiana",
  440. "phoneCode": "+594",
  441. "alpha2code": "GF",
  442. "alpha3code": "GUF"
  443. },
  444. {
  445. "name": "French Polynesia",
  446. "phoneCode": "+689",
  447. "alpha2code": "PF",
  448. "alpha3code": "PYF"
  449. },
  450. {
  451. "name": "Gabon",
  452. "phoneCode": "+241",
  453. "alpha2code": "GA",
  454. "alpha3code": "GAB"
  455. },
  456. {
  457. "name": "Georgia",
  458. "phoneCode": "+995",
  459. "alpha2code": "GE",
  460. "alpha3code": "GEO"
  461. },
  462. {
  463. "name": "Germany",
  464. "phoneCode": "+49",
  465. "alpha2code": "DE",
  466. "alpha3code": "DEU"
  467. },
  468. {
  469. "name": "Ghana",
  470. "phoneCode": "+233",
  471. "alpha2code": "GH",
  472. "alpha3code": "GHA"
  473. },
  474. {
  475. "name": "Gibraltar",
  476. "phoneCode": "+350",
  477. "alpha2code": "GI",
  478. "alpha3code": "GIB"
  479. },
  480. {
  481. "name": "Greece",
  482. "phoneCode": "+30",
  483. "alpha2code": "GR",
  484. "alpha3code": "GRC"
  485. },
  486. {
  487. "name": "Greenland",
  488. "phoneCode": "+299",
  489. "alpha2code": "GL",
  490. "alpha3code": "GRL"
  491. },
  492. {
  493. "name": "Grenada",
  494. "phoneCode": "+1",
  495. "alpha2code": "GD",
  496. "alpha3code": "GRD"
  497. },
  498. {
  499. "name": "Guadeloupe",
  500. "phoneCode": "+590",
  501. "alpha2code": "GP",
  502. "alpha3code": "GLP"
  503. },
  504. {
  505. "name": "Guam",
  506. "phoneCode": "+1",
  507. "alpha2code": "GU",
  508. "alpha3code": "GUM"
  509. },
  510. {
  511. "name": "Guatemala",
  512. "phoneCode": "+502",
  513. "alpha2code": "GT",
  514. "alpha3code": "GTM"
  515. },
  516. {
  517. "name": "Guinea",
  518. "phoneCode": "+224",
  519. "alpha2code": "GN",
  520. "alpha3code": "GIN"
  521. },
  522. {
  523. "name": "Guinea-Bissau",
  524. "phoneCode": "+245",
  525. "alpha2code": "GW",
  526. "alpha3code": "GNB"
  527. },
  528. {
  529. "name": "Guyana",
  530. "phoneCode": "+592",
  531. "alpha2code": "GY",
  532. "alpha3code": "GUY"
  533. },
  534. {
  535. "name": "Haiti",
  536. "phoneCode": "+509",
  537. "alpha2code": "HT",
  538. "alpha3code": "HTI"
  539. },
  540. {
  541. "name": "Honduras",
  542. "phoneCode": "+504",
  543. "alpha2code": "HN",
  544. "alpha3code": "HND"
  545. },
  546. {
  547. "name": "Hong Kong",
  548. "phoneCode": "+852",
  549. "alpha2code": "HK",
  550. "alpha3code": "HKG"
  551. },
  552. {
  553. "name": "Hungary",
  554. "phoneCode": "+36",
  555. "alpha2code": "HU",
  556. "alpha3code": "HUN"
  557. },
  558. {
  559. "name": "Iceland",
  560. "phoneCode": "+354",
  561. "alpha2code": "IS",
  562. "alpha3code": "ISL"
  563. },
  564. {
  565. "name": "India",
  566. "phoneCode": "+91",
  567. "alpha2code": "IN",
  568. "alpha3code": "IND"
  569. },
  570. {
  571. "name": "Indonesia",
  572. "phoneCode": "+62",
  573. "alpha2code": "ID",
  574. "alpha3code": "IDN"
  575. },
  576. {
  577. "name": "Iran",
  578. "phoneCode": "+98",
  579. "alpha2code": "IR",
  580. "alpha3code": "IRN"
  581. },
  582. {
  583. "name": "Iraq",
  584. "phoneCode": "+964",
  585. "alpha2code": "IQ",
  586. "alpha3code": "IRQ"
  587. },
  588. {
  589. "name": "Ireland",
  590. "phoneCode": "+353",
  591. "alpha2code": "IE",
  592. "alpha3code": "IRL"
  593. },
  594. {
  595. "name": "Israel",
  596. "phoneCode": "+972",
  597. "alpha2code": "IL",
  598. "alpha3code": "ISR"
  599. },
  600. {
  601. "name": "Italy",
  602. "phoneCode": "+39",
  603. "alpha2code": "IT",
  604. "alpha3code": "ITA"
  605. },
  606. {
  607. "name": "Jamaica",
  608. "phoneCode": "+1",
  609. "alpha2code": "JM",
  610. "alpha3code": "JAM"
  611. },
  612. {
  613. "name": "Japan",
  614. "phoneCode": "+81",
  615. "alpha2code": "JP",
  616. "alpha3code": "JPN"
  617. },
  618. {
  619. "name": "Jordan",
  620. "phoneCode": "+962",
  621. "alpha2code": "JO",
  622. "alpha3code": "JOR"
  623. },
  624. {
  625. "name": "Kazakhstan",
  626. "phoneCode": "+7",
  627. "alpha2code": "KZ",
  628. "alpha3code": "KAZ"
  629. },
  630. {
  631. "name": "Kenya",
  632. "phoneCode": "+254",
  633. "alpha2code": "KE",
  634. "alpha3code": "KEN"
  635. },
  636. {
  637. "name": "Kiribati",
  638. "phoneCode": "+686",
  639. "alpha2code": "KI",
  640. "alpha3code": "KIR"
  641. },
  642. {
  643. "name": "Kuwait",
  644. "phoneCode": "+965",
  645. "alpha2code": "KW",
  646. "alpha3code": "KWT"
  647. },
  648. {
  649. "name": "Kyrgyzstan",
  650. "phoneCode": "+996",
  651. "alpha2code": "KG",
  652. "alpha3code": "KGZ"
  653. },
  654. {
  655. "name": "Laos",
  656. "phoneCode": "+856",
  657. "alpha2code": "LA",
  658. "alpha3code": "LAO"
  659. },
  660. {
  661. "name": "Latvia",
  662. "phoneCode": "+371",
  663. "alpha2code": "LV",
  664. "alpha3code": "LVA"
  665. },
  666. {
  667. "name": "Lebanon",
  668. "phoneCode": "+961",
  669. "alpha2code": "LB",
  670. "alpha3code": "LBN"
  671. },
  672. {
  673. "name": "Lesotho",
  674. "phoneCode": "+266",
  675. "alpha2code": "LS",
  676. "alpha3code": "LSO"
  677. },
  678. {
  679. "name": "Liberia",
  680. "phoneCode": "+231",
  681. "alpha2code": "LR",
  682. "alpha3code": "LBR"
  683. },
  684. {
  685. "name": "Libya",
  686. "phoneCode": "+218",
  687. "alpha2code": "LY",
  688. "alpha3code": "LBY"
  689. },
  690. {
  691. "name": "Liechtenstein",
  692. "phoneCode": "+423",
  693. "alpha2code": "LI",
  694. "alpha3code": "LIE"
  695. },
  696. {
  697. "name": "Lithuania",
  698. "phoneCode": "+370",
  699. "alpha2code": "LT",
  700. "alpha3code": "LTU"
  701. },
  702. {
  703. "name": "Luxembourg",
  704. "phoneCode": "+352",
  705. "alpha2code": "LU",
  706. "alpha3code": "LUX"
  707. },
  708. {
  709. "name": "Macao",
  710. "phoneCode": "+853",
  711. "alpha2code": "MO",
  712. "alpha3code": "MAC"
  713. },
  714. {
  715. "name": "Macedonia",
  716. "phoneCode": "+389",
  717. "alpha2code": "MK",
  718. "alpha3code": "MKD"
  719. },
  720. {
  721. "name": "Madagascar",
  722. "phoneCode": "+261",
  723. "alpha2code": "MG",
  724. "alpha3code": "MDG"
  725. },
  726. {
  727. "name": "Malawi",
  728. "phoneCode": "+265",
  729. "alpha2code": "MW",
  730. "alpha3code": "MWI"
  731. },
  732. {
  733. "name": "Malaysia",
  734. "phoneCode": "+60",
  735. "alpha2code": "MY",
  736. "alpha3code": "MYS"
  737. },
  738. {
  739. "name": "Maldives",
  740. "phoneCode": "+960",
  741. "alpha2code": "MV",
  742. "alpha3code": "MDV"
  743. },
  744. {
  745. "name": "Mali",
  746. "phoneCode": "+223",
  747. "alpha2code": "ML",
  748. "alpha3code": "MLI"
  749. },
  750. {
  751. "name": "Malta",
  752. "phoneCode": "+356",
  753. "alpha2code": "MT",
  754. "alpha3code": "MLT"
  755. },
  756. {
  757. "name": "Marshall Islands",
  758. "phoneCode": "+692",
  759. "alpha2code": "MH",
  760. "alpha3code": "MHL"
  761. },
  762. {
  763. "name": "Martinique",
  764. "phoneCode": "+596",
  765. "alpha2code": "MQ",
  766. "alpha3code": "MTQ"
  767. },
  768. {
  769. "name": "Mauritania",
  770. "phoneCode": "+222",
  771. "alpha2code": "MR",
  772. "alpha3code": "MRT"
  773. },
  774. {
  775. "name": "Mauritius",
  776. "phoneCode": "+230",
  777. "alpha2code": "MU",
  778. "alpha3code": "MUS"
  779. },
  780. {
  781. "name": "Mayotte",
  782. "phoneCode": "+262",
  783. "alpha2code": "YT",
  784. "alpha3code": "MYT"
  785. },
  786. {
  787. "name": "Mexico",
  788. "phoneCode": "+52",
  789. "alpha2code": "MX",
  790. "alpha3code": "MEX"
  791. },
  792. {
  793. "name": "Moldova",
  794. "phoneCode": "+373",
  795. "alpha2code": "MD",
  796. "alpha3code": "MDA"
  797. },
  798. {
  799. "name": "Monaco",
  800. "phoneCode": "+377",
  801. "alpha2code": "MC",
  802. "alpha3code": "MCO"
  803. },
  804. {
  805. "name": "Mongolia",
  806. "phoneCode": "+976",
  807. "alpha2code": "MN",
  808. "alpha3code": "MNG"
  809. },
  810. {
  811. "name": "Montenegro",
  812. "phoneCode": "+382",
  813. "alpha2code": "ME",
  814. "alpha3code": "MNE"
  815. },
  816. {
  817. "name": "Montserrat",
  818. "phoneCode": "+1",
  819. "alpha2code": "MS",
  820. "alpha3code": "MSR"
  821. },
  822. {
  823. "name": "Morocco",
  824. "phoneCode": "+212",
  825. "alpha2code": "MA",
  826. "alpha3code": "MAR"
  827. },
  828. {
  829. "name": "Mozambique",
  830. "phoneCode": "+258",
  831. "alpha2code": "MZ",
  832. "alpha3code": "MOZ"
  833. },
  834. {
  835. "name": "Namibia",
  836. "phoneCode": "+264",
  837. "alpha2code": "NA",
  838. "alpha3code": "NAM"
  839. },
  840. {
  841. "name": "Nauru",
  842. "phoneCode": "+674",
  843. "alpha2code": "NR",
  844. "alpha3code": "NRU"
  845. },
  846. {
  847. "name": "Nepal",
  848. "phoneCode": "+977",
  849. "alpha2code": "NP",
  850. "alpha3code": "NPL"
  851. },
  852. {
  853. "name": "Netherlands",
  854. "phoneCode": "+31",
  855. "alpha2code": "NL",
  856. "alpha3code": "NLD"
  857. },
  858. {
  859. "name": "Netherlands Antilles",
  860. "phoneCode": "+599",
  861. "alpha2code": "AN",
  862. "alpha3code": "ANT"
  863. },
  864. {
  865. "name": "New Caledonia",
  866. "phoneCode": "+687",
  867. "alpha2code": "NC",
  868. "alpha3code": "NCL"
  869. },
  870. {
  871. "name": "New Zealand",
  872. "phoneCode": "+64",
  873. "alpha2code": "NZ",
  874. "alpha3code": "NZL"
  875. },
  876. {
  877. "name": "Nicaragua",
  878. "phoneCode": "+505",
  879. "alpha2code": "NI",
  880. "alpha3code": "NIC"
  881. },
  882. {
  883. "name": "Niger",
  884. "phoneCode": "+227",
  885. "alpha2code": "NE",
  886. "alpha3code": "NER"
  887. },
  888. {
  889. "name": "Nigeria",
  890. "phoneCode": "+234",
  891. "alpha2code": "NG",
  892. "alpha3code": "NGA"
  893. },
  894. {
  895. "name": "Niue",
  896. "phoneCode": "+683",
  897. "alpha2code": "NU",
  898. "alpha3code": "NIU"
  899. },
  900. {
  901. "name": "Norfolk Island",
  902. "phoneCode": "+672",
  903. "alpha2code": "NF",
  904. "alpha3code": "NFK"
  905. },
  906. {
  907. "name": "North Korea",
  908. "phoneCode": "+850",
  909. "alpha2code": "KP",
  910. "alpha3code": "PRK"
  911. },
  912. {
  913. "name": "Northern Mariana Islands",
  914. "phoneCode": "+1",
  915. "alpha2code": "MP",
  916. "alpha3code": "MNP"
  917. },
  918. {
  919. "name": "Norway",
  920. "phoneCode": "+47",
  921. "alpha2code": "NO",
  922. "alpha3code": "NOR"
  923. },
  924. {
  925. "name": "Oman",
  926. "phoneCode": "+968",
  927. "alpha2code": "OM",
  928. "alpha3code": "OMN"
  929. },
  930. {
  931. "name": "Pakistan",
  932. "phoneCode": "+92",
  933. "alpha2code": "PK",
  934. "alpha3code": "PAK"
  935. },
  936. {
  937. "name": "Palau",
  938. "phoneCode": "+680",
  939. "alpha2code": "PW",
  940. "alpha3code": "PLW"
  941. },
  942. {
  943. "name": "Palestine",
  944. "phoneCode": "+970",
  945. "alpha2code": "PS",
  946. "alpha3code": "PSE"
  947. },
  948. {
  949. "name": "Panama",
  950. "phoneCode": "+507",
  951. "alpha2code": "PA",
  952. "alpha3code": "PAN"
  953. },
  954. {
  955. "name": "Papua New Guinea",
  956. "phoneCode": "+675",
  957. "alpha2code": "PG",
  958. "alpha3code": "PNG"
  959. },
  960. {
  961. "name": "Paraguay",
  962. "phoneCode": "+595",
  963. "alpha2code": "PY",
  964. "alpha3code": "PRY"
  965. },
  966. {
  967. "name": "Peru",
  968. "phoneCode": "+51",
  969. "alpha2code": "PE",
  970. "alpha3code": "PER"
  971. },
  972. {
  973. "name": "Philippines",
  974. "phoneCode": "+63",
  975. "alpha2code": "PH",
  976. "alpha3code": "PHL"
  977. },
  978. {
  979. "name": "Poland",
  980. "phoneCode": "+48",
  981. "alpha2code": "PL",
  982. "alpha3code": "POL"
  983. },
  984. {
  985. "name": "Portugal",
  986. "phoneCode": "+351",
  987. "alpha2code": "PT",
  988. "alpha3code": "PRT"
  989. },
  990. {
  991. "name": "Puerto Rico",
  992. "phoneCode": "+1",
  993. "alpha2code": "PR",
  994. "alpha3code": "PRI"
  995. },
  996. {
  997. "name": "Qatar",
  998. "phoneCode": "+974",
  999. "alpha2code": "QA",
  1000. "alpha3code": "QAT"
  1001. },
  1002. {
  1003. "name": "Congo",
  1004. "phoneCode": "+242",
  1005. "alpha2code": "CG",
  1006. "alpha3code": "COG"
  1007. },
  1008. {
  1009. "name": "Réunion",
  1010. "phoneCode": "+262",
  1011. "alpha2code": "RE",
  1012. "alpha3code": "REU"
  1013. },
  1014. {
  1015. "name": "Romania",
  1016. "phoneCode": "+40",
  1017. "alpha2code": "RO",
  1018. "alpha3code": "ROU"
  1019. },
  1020. {
  1021. "name": "Russia",
  1022. "phoneCode": "+7",
  1023. "alpha2code": "RU",
  1024. "alpha3code": "RUS"
  1025. },
  1026. {
  1027. "name": "Rwanda",
  1028. "phoneCode": "+250",
  1029. "alpha2code": "RW",
  1030. "alpha3code": "RWA"
  1031. },
  1032. {
  1033. "name": "Saint Barthélemy",
  1034. "phoneCode": "+590",
  1035. "alpha2code": "BL",
  1036. "alpha3code": "BLM"
  1037. },
  1038. {
  1039. "name": "Saint Helena",
  1040. "phoneCode": "+290",
  1041. "alpha2code": "SH",
  1042. "alpha3code": "SHN"
  1043. },
  1044. {
  1045. "name": "Saint Kitts and Nevis",
  1046. "phoneCode": "+1",
  1047. "alpha2code": "KN",
  1048. "alpha3code": "KNA"
  1049. },
  1050. {
  1051. "name": "Saint Martin",
  1052. "phoneCode": "+590",
  1053. "alpha2code": "MF",
  1054. "alpha3code": "MAF"
  1055. },
  1056. {
  1057. "name": "Saint Pierre and Miquelon",
  1058. "phoneCode": "+508",
  1059. "alpha2code": "PM",
  1060. "alpha3code": "SPM"
  1061. },
  1062. {
  1063. "name": "Saint Vincent and the Grenadines",
  1064. "phoneCode": "+1",
  1065. "alpha2code": "VC",
  1066. "alpha3code": "VCT"
  1067. },
  1068. {
  1069. "name": "Samoa",
  1070. "phoneCode": "+685",
  1071. "alpha2code": "WS",
  1072. "alpha3code": "WSM"
  1073. },
  1074. {
  1075. "name": "San Marino",
  1076. "phoneCode": "+378",
  1077. "alpha2code": "SM",
  1078. "alpha3code": "SMR"
  1079. },
  1080. {
  1081. "name": "São Tomé and Príncipe",
  1082. "phoneCode": "+239",
  1083. "alpha2code": "ST",
  1084. "alpha3code": "STP"
  1085. },
  1086. {
  1087. "name": "Saudi Arabia",
  1088. "phoneCode": "+966",
  1089. "alpha2code": "SA",
  1090. "alpha3code": "SAU"
  1091. },
  1092. {
  1093. "name": "Senegal",
  1094. "phoneCode": "+221",
  1095. "alpha2code": "SN",
  1096. "alpha3code": "SEN"
  1097. },
  1098. {
  1099. "name": "Serbia",
  1100. "phoneCode": "+381",
  1101. "alpha2code": "RS",
  1102. "alpha3code": "SRB"
  1103. },
  1104. {
  1105. "name": "Seychelles",
  1106. "phoneCode": "+248",
  1107. "alpha2code": "SC",
  1108. "alpha3code": "SYC"
  1109. },
  1110. {
  1111. "name": "Sierra Leone",
  1112. "phoneCode": "+232",
  1113. "alpha2code": "SL",
  1114. "alpha3code": "SLE"
  1115. },
  1116. {
  1117. "name": "Singapore",
  1118. "phoneCode": "+65",
  1119. "alpha2code": "SG",
  1120. "alpha3code": "SGP"
  1121. },
  1122. {
  1123. "name": "Sint Maarten (Dutch part)",
  1124. "phoneCode": "+1",
  1125. "alpha2code": "SX",
  1126. "alpha3code": "SXM"
  1127. },
  1128. {
  1129. "name": "Slovakia",
  1130. "phoneCode": "+421",
  1131. "alpha2code": "SK",
  1132. "alpha3code": "SVK"
  1133. },
  1134. {
  1135. "name": "Slovenia",
  1136. "phoneCode": "+386",
  1137. "alpha2code": "SI",
  1138. "alpha3code": "SVN"
  1139. },
  1140. {
  1141. "name": "Solomon Islands",
  1142. "phoneCode": "+677",
  1143. "alpha2code": "SB",
  1144. "alpha3code": "SLB"
  1145. },
  1146. {
  1147. "name": "Somalia",
  1148. "phoneCode": "+252",
  1149. "alpha2code": "SO",
  1150. "alpha3code": "SOM"
  1151. },
  1152. {
  1153. "name": "South Africa",
  1154. "phoneCode": "+27",
  1155. "alpha2code": "ZA",
  1156. "alpha3code": "ZAF"
  1157. },
  1158. {
  1159. "name": "South Korea",
  1160. "phoneCode": "+82",
  1161. "alpha2code": "KR",
  1162. "alpha3code": "KOR"
  1163. },
  1164. {
  1165. "name": "South Sudan",
  1166. "phoneCode": "+211",
  1167. "alpha2code": "SS",
  1168. "alpha3code": "SSD"
  1169. },
  1170. {
  1171. "name": "Spain",
  1172. "phoneCode": "+34",
  1173. "alpha2code": "ES",
  1174. "alpha3code": "ESP"
  1175. },
  1176. {
  1177. "name": "Sri Lanka",
  1178. "phoneCode": "+94",
  1179. "alpha2code": "LK",
  1180. "alpha3code": "LKA"
  1181. },
  1182. {
  1183. "name": "Saint Lucia",
  1184. "phoneCode": "+1",
  1185. "alpha2code": "LC",
  1186. "alpha3code": "LCA"
  1187. },
  1188. {
  1189. "name": "Sudan",
  1190. "phoneCode": "+249",
  1191. "alpha2code": "SD",
  1192. "alpha3code": "SDN"
  1193. },
  1194. {
  1195. "name": "Suriname",
  1196. "phoneCode": "+597",
  1197. "alpha2code": "SR",
  1198. "alpha3code": "SUR"
  1199. },
  1200. {
  1201. "name": "Swaziland",
  1202. "phoneCode": "+268",
  1203. "alpha2code": "SZ",
  1204. "alpha3code": "SWZ"
  1205. },
  1206. {
  1207. "name": "Sweden",
  1208. "phoneCode": "+46",
  1209. "alpha2code": "SE",
  1210. "alpha3code": "SWE"
  1211. },
  1212. {
  1213. "name": "Switzerland",
  1214. "phoneCode": "+41",
  1215. "alpha2code": "CH",
  1216. "alpha3code": "CHE"
  1217. },
  1218. {
  1219. "name": "Syrian Arab Republic",
  1220. "phoneCode": "+963",
  1221. "alpha2code": "SY",
  1222. "alpha3code": "SYR"
  1223. },
  1224. {
  1225. "name": "Taiwan",
  1226. "phoneCode": "+886",
  1227. "alpha2code": "TW",
  1228. "alpha3code": "TWN"
  1229. },
  1230. {
  1231. "name": "Tajikistan",
  1232. "phoneCode": "+992",
  1233. "alpha2code": "TJ",
  1234. "alpha3code": "TJK"
  1235. },
  1236. {
  1237. "name": "Tanzania",
  1238. "phoneCode": "+255",
  1239. "alpha2code": "TZ",
  1240. "alpha3code": "TZA"
  1241. },
  1242. {
  1243. "name": "Thailand",
  1244. "phoneCode": "+66",
  1245. "alpha2code": "TH",
  1246. "alpha3code": "THA"
  1247. },
  1248. {
  1249. "name": "Bahamas",
  1250. "phoneCode": "+1",
  1251. "alpha2code": "BS",
  1252. "alpha3code": "BHS"
  1253. },
  1254. {
  1255. "name": "Gambia",
  1256. "phoneCode": "+220",
  1257. "alpha2code": "GM",
  1258. "alpha3code": "GMB"
  1259. },
  1260. {
  1261. "name": "Timor-Leste",
  1262. "phoneCode": "+670",
  1263. "alpha2code": "TL",
  1264. "alpha3code": "TLS"
  1265. },
  1266. {
  1267. "name": "Togo",
  1268. "phoneCode": "+228",
  1269. "alpha2code": "TG",
  1270. "alpha3code": "TGO"
  1271. },
  1272. {
  1273. "name": "Tokelau",
  1274. "phoneCode": "+690",
  1275. "alpha2code": "TK",
  1276. "alpha3code": "TKL"
  1277. },
  1278. {
  1279. "name": "Tonga",
  1280. "phoneCode": "+676",
  1281. "alpha2code": "TO",
  1282. "alpha3code": "TON"
  1283. },
  1284. {
  1285. "name": "Trinidad and Tobago",
  1286. "phoneCode": "+1",
  1287. "alpha2code": "TT",
  1288. "alpha3code": "TTO"
  1289. },
  1290. {
  1291. "name": "Tunisia",
  1292. "phoneCode": "+216",
  1293. "alpha2code": "TN",
  1294. "alpha3code": "TUN"
  1295. },
  1296. {
  1297. "name": "Turkey",
  1298. "phoneCode": "+90",
  1299. "alpha2code": "TR",
  1300. "alpha3code": "TUR"
  1301. },
  1302. {
  1303. "name": "Turkmenistan",
  1304. "phoneCode": "+993",
  1305. "alpha2code": "TM",
  1306. "alpha3code": "TKM"
  1307. },
  1308. {
  1309. "name": "Turks and Caicos Islands",
  1310. "phoneCode": "+1",
  1311. "alpha2code": "TC",
  1312. "alpha3code": "TCA"
  1313. },
  1314. {
  1315. "name": "Tuvalu",
  1316. "phoneCode": "+688",
  1317. "alpha2code": "TV",
  1318. "alpha3code": "TUV"
  1319. },
  1320. {
  1321. "name": "Uganda",
  1322. "phoneCode": "+256",
  1323. "alpha2code": "UG",
  1324. "alpha3code": "UGA"
  1325. },
  1326. {
  1327. "name": "Ukraine",
  1328. "phoneCode": "+380",
  1329. "alpha2code": "UA",
  1330. "alpha3code": "UKR"
  1331. },
  1332. {
  1333. "name": "United Arab Emirates",
  1334. "phoneCode": "+971",
  1335. "alpha2code": "AE",
  1336. "alpha3code": "ARE"
  1337. },
  1338. {
  1339. "name": "United Kingdom",
  1340. "phoneCode": "+44",
  1341. "alpha2code": "GB",
  1342. "alpha3code": "GBR"
  1343. },
  1344. {
  1345. "name": "United States",
  1346. "phoneCode": "+1",
  1347. "alpha2code": "US",
  1348. "alpha3code": "USA"
  1349. },
  1350. {
  1351. "name": "Uruguay",
  1352. "phoneCode": "+598",
  1353. "alpha2code": "UY",
  1354. "alpha3code": "URY"
  1355. },
  1356. {
  1357. "name": "U.S. Virgin Islands",
  1358. "phoneCode": "+1",
  1359. "alpha2code": "VI",
  1360. "alpha3code": "VIR"
  1361. },
  1362. {
  1363. "name": "Uzbekistan",
  1364. "phoneCode": "+998",
  1365. "alpha2code": "UZ",
  1366. "alpha3code": "UZB"
  1367. },
  1368. {
  1369. "name": "Vanuatu",
  1370. "phoneCode": "+678",
  1371. "alpha2code": "VU",
  1372. "alpha3code": "VUT"
  1373. },
  1374. {
  1375. "name": "Vatican City",
  1376. "phoneCode": "+39",
  1377. "alpha2code": "VA",
  1378. "alpha3code": "VAT"
  1379. },
  1380. {
  1381. "name": "Venezuela",
  1382. "phoneCode": "+58",
  1383. "alpha2code": "VE",
  1384. "alpha3code": "VEN"
  1385. },
  1386. {
  1387. "name": "Vietnam",
  1388. "phoneCode": "+84",
  1389. "alpha2code": "VN",
  1390. "alpha3code": "VNM"
  1391. },
  1392. {
  1393. "name": "Wallis and Futuna",
  1394. "phoneCode": "+681",
  1395. "alpha2code": "WF",
  1396. "alpha3code": "WLF"
  1397. },
  1398. {
  1399. "name": "Yemen",
  1400. "phoneCode": "+967",
  1401. "alpha2code": "YE",
  1402. "alpha3code": "YEM"
  1403. },
  1404. {
  1405. "name": "Zambia",
  1406. "phoneCode": "+260",
  1407. "alpha2code": "ZM",
  1408. "alpha3code": "ZMB"
  1409. },
  1410. {
  1411. "name": "Zimbabwe",
  1412. "phoneCode": "+263",
  1413. "alpha2code": "ZW",
  1414. "alpha3code": "ZWE"
  1415. }
  1416. ];
  1418. onSelect(event: TypeaheadMatch): void {
  1419. this.selectedOption = event.item;
  1420. }
  1421. }
Step 7
Now, open the app.component.html file and add the following code in the file,
  1. <app-ngx-bootstrap-typeahead></app-ngx-bootstrap-typeahead>
Step 8
Let's open app.module.ts file and add the following code in the file,
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  4. import { AppComponent } from './app.component';
  5. import { HttpClientModule } from '@angular/common/http';
  6. import { NgxBootstrapTypeaheadComponent } from './ngx-bootstrap-typeahead/ngx-bootstrap-typeahead.component';
  7. import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
  8. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  10. @NgModule({
  11. declarations: [
  12. AppComponent,
  13. NgxBootstrapTypeaheadComponent
  14. ],
  15. imports: [
  16. BrowserModule,
  17. TypeaheadModule.forRoot(),
  18. BrowserAnimationsModule,
  19. FormsModule,
  20. ReactiveFormsModule,
  21. HttpClientModule
  22. ],
  23. bootstrap: [AppComponent]
  24. })
  25. export class AppModule { }
Now it's time for the output,
Use Of Ngx-Bootstrap Typehead In Angular 8
Use Of Ngx-Bootstrap Typehead In Angular 8
Use Of Ngx-Bootstrap Typehead In Angular 8
As we can see, whenever I am typing the key, it's getting the values related to the search. We can get the data from the web API.

Conclusion

In this article, we have seen the Ngx-Bootstrap typehead Component in an Angular 8 application.
Please give your valuable feedback/comments/questions about this article.
I hope you have enjoyed this article, as I have enjoyed writing and coding the examples.
Please let me know how to improve it.