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 – 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

Angular 6 – How to Implement Lazy Loading for Components Sample Application Example

Lazy loading is an architectural design which is popular these days among new technologies. This concept is mainly used in complex and data-intensive applications. In Lazy loading only that module or component is loaded which is required on that point of time, this makes an application very fast and economic on memory consumption factors.

Continue reading Angular 6 – How to Implement Lazy Loading for Components Sample Application Example

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

Angular 2+ | Parent Child Checkbox List Structure with Expand Collapse

In this post we will discuss on How to Create a Checkbox List having parents and child structure, using single data object.

What we will do here?

– Create a list with parents and children each having a checkbox.
– Parents having controls to expand/ collapse respective children.
– Expand/ Collapse All control on top of the list.
– Select/ Unselect All control on top of the list.

Continue reading Angular 2+ | Parent Child Checkbox List Structure with Expand Collapse

Angular 2+ | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions

Image Carousels provides a good front-end user experience to show graphics or images in a small space in an interactive way.

But in Angular Application we hardly find great carousels/ image sliders to work with. In this tutorial, we will implement a Great Simple and Easy to Use Angular Image Carousel.

Continue reading Angular 2+ | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions

Angular 2+| Not Reflecting Change in Variable and Model Value Passed in Component Method as Parameter/ Argument Resolved!

In an Angular application in some situations, we need to make changes in local variables which are getting used and defined as global. These variable or Model values does not reflect any change if we pass them as argument or parameter in a component method, then change in that parameter value does not reflect globally in view.

Continue reading Angular 2+| Not Reflecting Change in Variable and Model Value Passed in Component Method as Parameter/ Argument Resolved!

Angular IO 6 Quick CLI commands: Shortz

Just simple quick commands to create an Angular 6 application. You can read more here. In this post, we will only do not that much reading.

Continue reading Angular IO 6 Quick CLI commands: Shortz