Angular 7 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+

In our previous post, we discussed How to Implement Swiper Carousel in Angular in 3 easy steps,  Today we will discuss another but very powerful jQuery dependent Carousel Slick, which can be easily Implemented in and Angular 6+ version application.

Continue reading Angular 7 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+

Auto-focus Input and Open Keypad On View/ Page Load in Ionic 3 Application

Mobile applications having input fields for search or forms can be optimized in terms of user-friendliness if developer autofocus first input field or search field on application or page load. This behavior seems to be nominal and not of much importance but it really ads up to the convenience of the application user.

Continue reading Auto-focus Input and Open Keypad On View/ Page Load in Ionic 3 Application

Angular 6/7 | Create Custom Pipes AKA Filters in Angular 2.X

Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time).

For such small and repeated tasks of transforming values in other formats we used to use Filters in AngularJS version 1, But after Angular 2 we have pipes which serve similar tasks and once defined can be used anywhere in the application.

Continue reading Angular 6/7 | Create Custom Pipes AKA Filters in Angular 2.X

Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps

AIn this post, we will discuss a more advanced Image Carousel know as Swiper. This Carousel is actually more than an Image Slider, we can have any type of content from HTML, graphics, video etc. Swiper also supports parallax effect multiple slide effects, having verticle and horizontal sliders. Swiper also supports nested and easy installation of multiple Sliders/ Carousels on a single view.

Continue reading Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps

How to use *ngSwitch in Angular 2+ Versions

Switch case is very popular among many languages weather on client side or server side. A switch provides flexibility to validate a section according to expressions. In this post, we will discuss the implementation of Switch cases in Angular 7 latest version.

Continue reading How to use *ngSwitch in Angular 2+ Versions

Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

Angular Material 7 has introduced two major updates, Virtual Scroll, and Drag and Drop. Both these features prove very useful and productive from a user perspective. You can check my previous post on Virtual Scroll here. In this post, we will create an application to demonstrate Drag and Drop functionality in Angular Material 7.

Drag and Drop enables a user to move anything from one place to another in a web application with the help of a mouse, this helps in creating interactive, highly simple clean user interface. In our application we will have three user lists i.e Still Doing, Done and Nevermind. A user can drop an item from any list and can drop to any other list.

Continue reading Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x

In this post, we will discuss one of the major updates in Angular 7 version, its new Virtual scroll feature in CDK which is Material Component Development Kit. Virtual scrolling comes into action where we have a long list of item in applications, the performance of page decreases due to lots of hidden HTML data which are of no use.

Virtual scrolling improves the performance of pages by dynamically rendering only that list data which is visible to the user, as a user scrolls the current set of items replaced by new giving a glimpse of a continuous traditional list.

Continue reading Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x

Integrate Angular Material in Ionic 3

Angular’s team build Google’s Material design-based framework known as Angular Material. This framework is based on principles of Google material design, you can read more about it here.

Today we will discuss, on how we can fuse the beauty of Angular Material and its powerful components with Ionic 3 framework. At the end of this tutorial, you will be able to build an application which will have components from Angular Material which you can find here.

Continue reading Integrate Angular Material in Ionic 3

How to Check All/ Uncheck All Checkbox List in Angular.IO Version 7

In this post, we will discuss a very common functionality on checkboxes, select and unselect all checkboxes in Angular applications. We will create a project in the latest Angular 7 version and create a dummy item list to demonstrate this.

Continue reading How to Check All/ Uncheck All Checkbox List in Angular.IO Version 7

Pass Data between Components in Angular 6 Example Application

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 Pass Data between Components in Angular 6 Example Application