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.
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
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
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 8/7 Bootstrap 4 | Date-picker and Time-picker Example Implement in Angular Application
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 7/8 | Adding Toastr Messages in Angular 4+ Web Application 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
Angular routing plays an important role in a real-world application which is responsible for loading different components which may have sensitive data as well. Angular provides a full proof mechanism to develop an application which can add a protecting shield for accessing components.
Continue reading Angular 7/6 | Use Auth Guards CanActivate and Resolve in Angular Routing Quick Example
Ionic 4 is using Angular Routing, so it becomes very easy to add authentication in an Ionic application using Auth Guards.
In this post, we will create a simple login application to quickly demonstrate how we can implement Angular Guards in Ionic 4 to prevent access to pages if the user is not logged in. This is very common and required by most of the real world application where we don’t want some pages to be accessed without proper authentication.
Continue reading Ionic 4 | Create Simple Login and Prevent Page Access using Angular Guards
After the release of Ionic’s stable version 4, the major change which is introduced besides web components is related to Routing. The latest version of Ionic now supports Angular Routing.
In the earlier version on Ionic, there was the concept of push and pop, where pages were pushed in a stack of pages having viewable page object on top. So if we want to go to some page we simply go to that pushed page index or push a new one.
Continue reading Ionic 4 | Latest Angular Routing in Ionic 4 Application
We have already discussed other Image and Content carousel like Slick and Swiper to implement in Angular 6 & 7 version application. Swiper is a very popular carousel which also used with Ionic known as Slides.
Continue reading Angular 7/6 | Adding Owl Carousel 2 Image and Content Slider in Angular Application with Custom Navigation in 3 Steps