In iPhones, you may have noticed that action options are shown in a sliding menu which pops out above screen sliding in from the bottom.
This is known as Action Sheet dialog mainly used to show some action buttons like in Facebook app they show options to report or flag post/images.
Continue reading Ionic 4 | Add Bottom to Up Menu / Action Sheets in Ionic Application without Native Plugin
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
In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners.
Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications. Continue reading Angular 7 Material | Add Progress Spinner / Loader in Angular Application Example
Compatible from Angular 4.3 to latest version 7
Angular Interceptors can be used in a number of ways as they provide powerful support to HTTP calls we make from web applications. Web application build using Angular generally makes HTTP calls to the server for dynamic information, so it’s very important to provide information about what’s the status to API calls to users. Loaders/ Spinners and sometimes Progress bars are shown to inform the user that there are some server requests going on.
Continue reading Angular 8/7 | Show Global Progress bar/ Loader on HTTP calls in few steps using Angular Interceptors in Angular 4.3+
Angular Interceptor is a powerful feature which can be used in many ways for securing and handling many HTTP related phenomena. HTTP interceptors were available in AngularJS but were missing in Angular 2, so there was a missing gap to manipulate HTTP calls globally at one place.
Continue reading Angular 7/6 | Handle HTTP Request and Response using Interceptors in Angular 4.3 plus versions
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 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
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
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.