Angular Material provides datatable components equipped with many common features like data filter, pagination, sorting on columns and even frozen columns and headers.
In this post, we will create an Angular application using Angular Material Tables component to show JSON data in tabular form. We can get data from server side using API’s. Continue reading Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns
We have already discussed the basic usage and implementation of Angular Material Autocomplete Component in an Angular Application in our previous post here.
Autocomplete is a very popular behavior used in many application to easy user form filling experience by providing some already built strings to fast data entry. Autocomplete is very similar to Input fields with addition to some Items showing up when the user focuses on that Input.
Continue reading Angular 7/6 Material Autocomplete Example with Remote/ Server Side Results
In this post, we will discuss How to Add and Autocomplete/ Suggestion box in Angular Application. Autocomplete helps a user to see predefined list items to choose from. These items in Autocomplete suggestions can be saved on local component, JSON file or remote results shown as user types in.
Autocomplete is attached to a simple input field which shows values to be filled as we see in chrome browser AutoFill. Data items to show in Autocomplete can be a simple list of an array or a JSON object.
Continue reading Angular 7/6 | Add AutoComplete in Angular Application using Angular Material
Supported from Angular 2 to latest version 8
Google maps are used in many applications as a location with visible maps pays an important role to make information more user-friendly. Embedded Maps can display markers of location or enable visual selection of address or show geographical location reviews etc.
In this post, we will add Google Maps in an Angular project using Angular Google Maps module. Adding/ Embedding Google Maps in an Angular project becomes very easy by using this module. Here we will explain step by step tutorial to make it even more easy with a new sample Angular project using latest CLI current version 7.3.8
Many of the applications have search bars which may be related to search any type of data may be available on the server or connected to some API. In normal practice a user types in the query to get related results in response. But in a technical sense if we bind a keyup event on an input search, then on every keyup event an API hit will be made for example if user types in “car” then three API hits for each character will be made.
We all know about Bootstrap is a free and open-source Web framework, widely used by developer whether they are using jQuery or AngularJS in development.
Bootstrap takes away headache for making application responsive and making it compatible to cross browsers. Moreover, it provides very easy to use plug and play HTML and working web widgets making development a swing.
Continuing from my previous post has an example of filter pipe usage in Angular 5 application. Here we will upgrade that simple filter app to level next. I have upgraded this application to Angular v6, worked basically on two important methods using which we can pass data between Angular components.
Continue reading Angular 7/6 | Pass Data between Components Example Application
