A search-filter to any data list or table adds up more value to the usability of the page.
In this article, we will learn how to quickly add a search filter on any type of data which can be a list or table using a special filter package ng2-search-filter for Angular projects. Continue reading Ionic 4/5 Simple Filter Search Pipe for Lists using ng2-search-filter
In this tutorial, we will implement the Action Sheet menu in the Ionic 5 application. The action sheet menu is open by sliding up from the bottom of the view.
Action sheet menu is added to provide some action controls to the user which pops up and gets visible which takes no space on view at normal. Continue reading Ionic 4/5 Action Sheet | Angular Tutorial
Tabs can manage multiple data views in the same area. In this article, we will learn how to use the Bootstrap Tabset UI component with Ionic 4. Continue reading Ionic 4 Tabs | Angular Bootstrap without Routing
In a real-world Angular application, a number of components may exist with their own specific task to accomplish. This hierarchy of components may have parent-child or relation as siblings.
To communicate from parent to child component we use @Input decorator to pass data from parent to child component and to send back data from child to parent we use @Output decorator. The @Output emits the data using the EventEmitter method to the parent component. Continue reading Angular 8/9 @Input, @Output and EventEmitter Tutorial by Quick Example
Google Maps can be easily implemented in an Angular project using the @agm package as we have already discussed here.
In this tutorial, we will focus on adding a Circle Radius in the map to limit the markers shown to the user. A user can control up to how far the markers/ locations should be visible.
This is a practical situation where we can’t show all the country’s location if a person wants to view the same city results.
For the basic installation of Google Maps, you can check my previous post here. In this post, we will only focus on adding a Radius circle with logic on How to show only those markers that reside in the Radius Circle.
Check the working demo here.
Continue reading Show markers in draggable Radius on Angular Google Maps
Compatible from Angular 2 to latest version 9
Angular Google Maps package provides fully featured integration of Javascript-based Google Maps in Angular Applications.
Here we will discuss how to:
Check the working demo here.
Using @Input decorator parent component can pass values to child components using property binding. But there may be a case where we are passing more than one property in a child component.
We may need control on which property is changed and also check if other properties have changed from the previous one or not.
In this tutorial, we will discuss how to check which of the passed input properties changed by using the OnChanges lifecycle hook of a component. Continue reading Angular @input Check Which Property Changed using OnChanges
The Angular Material Tree can be added using the mat-tree directive component. This tree structure gives the ability to expand/ collapse data lists into multi-level nodes.
In this tutorial, we will get to know how to add the Angular material Tree UI component in the project using the latest version of Angular Material 9. Continue reading Angular Material 8/9 Tree Tutorial By Example
In this tutorial, we will discuss a simple awesome image slider with a great feature to show a full-screen lightbox of full image on click.
This image slider is created by Sanjay Verma and loaded with many features required for a web layout based application.
A user can click on an image in the slider to view its original size image in full screen. Besides this catching feature, it supports autoplay, infinite, animation control, etc. Continue reading Angular 8/9 Image Slider with Lightbox using ng-image-slider Tutorial
Owl Carousel 2 is one of the most popular images and content slider library. It provides a number of feature which makes it compatible and fully controlled and customizable carousel plugin. Moreover, its awsome support for the responsive environment makes it a better choice. Continue reading Angular 8/9 Owl Carousel 2 Using ngx-owl-carousel-o Tutorial by Example
