Use Of Ngx-Bootstrap Typehead In Angular 8

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;">  
  3.   
  4.   <pre style="background-color: antiquewhite;" class="card card-block card-header mb-3">Selected option: {{selectedOption | json}}</pre>  
  5.   
  6.   <input [(ngModel)]="selectedValue" [typeahead]="countries" typeaheadOptionField="name" [typeaheadScrollable]="true"  
  7.     (typeaheadOnSelect)="onSelect($event)" class="form-control">  
  8.   
  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';  
  3.   
  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.   ];  
  1417.   
  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';    
  9.     
  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.