Category: Angular

Angular 7/6 | Add AutoComplete in Angular Application using Angular Material

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

Angular 7/6 | Add Google Maps with Location Search in Angular 2 plus Applications using Angular Google Maps Module (@agm/core) Easily

Supported from Angular 2 to latest version 7

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

Continue reading Angular 7/6 | Add Google Maps with Location Search in Angular 2 plus Applications using Angular Google Maps Module (@agm/core) Easily

Angular 7/6 | Add Data-tables with Ultimate features in Few Steps!

Supported from Angular 2 + to v7

Data tables are widely used in applications to show data sets with necessary features which are must to have for good user interactions like Pagination, Sorting by columns, Scrollings in horizontal and verticle directions, etc.

Application dealing with a large number of tabular data, it becomes very difficult to manage other details as well like the columns with custom templating and flexible styling.

Continue reading Angular 7/6 | Add Data-tables with Ultimate features in Few Steps!

Angular 7/6 | Adding Walk-through / Introduction / Tour Plugin for Step by Step Tutorial in Angular 2+ Applications

These days you may have noticed many applications including web and mobile having Tour Introduction to explaining something new or changed features in the application. A user can get to know about various features in this way when element or area is especially focused on a message.

Such interaction is known by many names like Walkthrough, Introductions or Tour. In this post, we will also implement a similar feature in  Angular 7 application.

Continue reading Angular 7/6 | Adding Walk-through / Introduction / Tour Plugin for Step by Step Tutorial in Angular 2+ Applications

Angular 7 & Ionic 4 | Adding Scratch Cards like Google Pay in Ionic Application using Javascript Liberary

Compatible with Ionic 4/3 and Angular 2 – 7 Web Applications

These days you may have seen many Payment applications like Google pay, PayTm, PhonePe, etc having scratch cards where users can scratch like real one to reveal offers or points.

In Ionic as well we can create similar Scratch Cards effect, loved by users as it involves user interactions and a touch of suspense. These Scratch cards are very much popular and seen in many applications.

Continue reading Angular 7 & Ionic 4 | Adding Scratch Cards like Google Pay in Ionic Application using Javascript Liberary

Angular 7/6 Pagination | Quickly Implement Customized Local or Server Pagination in 3 Steps

Showing a large number of data in tabular or lists requires a paging mechanism as we see in Google search. In this post, we will implement a Pagination module to show large lists of data using Pagination element.

Continue reading Angular 7/6 Pagination | Quickly Implement Customized Local or Server Pagination in 3 Steps

Angular 7/6 | Add Debounce Time using RxJS 6.x.x to Optimize Search Input for API results from server

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.

Continue reading Angular 7/6 | Add Debounce Time using RxJS 6.x.x to Optimize Search Input for API results from server

Angular 7 Bootstrap 4 | Date-picker and Time-picker Example Implement in Angular Application

Bootstrap is a pack of beautiful ready to plug UI components and also helps mobile first application development. Bootstrap with Angular can make more powerful apps with already tried and tested web UI components which are fully responsive and supportive for any screen size.

With ng-bootstrap‘s latest version 4.1.0 we can develop an application in Angular’s latest version 7. In this post we will get to know to include Bootstrap in Angular 7 project and also implement Datepicker and Time Picker Bootstrap component is a new Angular Project.

Continue reading Angular 7 Bootstrap 4 | Date-picker and Time-picker Example Implement in Angular Application

Angular 6/7 | Adding Toastr Messages in Angular 4+ Web Application in Few Steps

The application becomes more user-friendly when the user gets information about what is happening on screen. Whether its mobile or a Web Application showing messages like Success, Error or Notification in Toasts format is very common.

Toasts are floating elements on the screen which fades away after some time or by some user interactions like click or tap on it. These do not cover the space area and looks awesome due to beautiful animations and colors.

Continue reading Angular 6/7 | Adding Toastr Messages in Angular 4+ Web Application in Few Steps

Bootstap in Angular 7 | How to use Bootstrap Components in Angular 4+ Versions in Few Steps

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.

Continue reading Bootstap in Angular 7 | How to use Bootstrap Components in Angular 4+ Versions in Few Steps