Use Of Ngx-Bootstrap Typehead In Angular 8
In this article, we will learn about the Typehead component which is a cool feature of Ngx-bootstrap.
Join the DZone community and get the full member experience.Join For Free
Ngx-Bootstrap has released a package of open-source tools which are native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article, we will learn about the 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.
- Basic knowledge of Angular
- Visual Studio Code must be installed
- Angular CLI must be installed
- Node JS must be installed
Let's create a new Angular project using the following NPM command,
Now, let's create a new component by using the following command,
npm by using the folowing command.
This will be added to our root module
Now let's add bootstrap styles in our index.html file .
For Bootstrap 3,
For Bootstrap 4
Let add the template in our ngx-bootstrap-typehead.component.html.
Now, open the ngx-bootstrap-typehead.component.ts file and add the following code in this file,
Now, open the app.component.html file and add the following code in the file,
Let's open app.module.ts file and add the following code in the file,
Now it's time for the output,
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.
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.
Opinions expressed by DZone contributors are their own.