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
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’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
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
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 Angular 7/6 | Pass Data between Components Example Application
Listing of items in data is a simple way to show items. If users have to select only a single Item out of it, we need to use radio input fields. here we will discuss the implementation of radio input list in Angular 6. We will develop a simple Angular application which will have the following tasks:
1) Create a new Angular Application.
2) item.ts having item model definition.
3) mock-data.ts, will have a list of items.
4) use ngModel to have data binding flowing both sides.
5) Change event binding to get Checked item record.
Continue reading Angular 7/6 | How to Show Radio Input Listing
Angular’s best feature is component. We can divide different modules into a number of components. Where each component having its own responsibility to perform. But, sometimes these components may need to communicate with each other and share data having each other’s dependencies.
In this post, we will discuss a simple example app which will share data between components using @Input() Decorator. @Input() decorator will allow passing data in the defined template.
Continue reading Angular 7/6 | Share Data between Components Using @Input Decorator
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 7/6 | Parent Child Checkbox List Structure with Expand Collapse
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 7/6 | Implement Simple Image Carousel/ Slider in Angular 2 Plus Versions
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 7/6 | Not Reflecting Change in Variable and Model Value Passed in Component Method as Parameter/ Argument Resolved!