Angular Google Maps in Modal | Autocomplete & Select Location, Latitude, Longitude, Address

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:

  1. Install Google Maps and Add API Keys
  2. Add Dynamic Google Maps in a Component
  3. Add Location Search Filter
  4. Draggable Marker
  5. Zoom Control
  6. Get Lattitude and Longitude of Marker Placed

Check the working demo here.

Continue reading Angular Google Maps in Modal | Autocomplete & Select Location, Latitude, Longitude, Address

Angular @input Check Which Property Changed using OnChanges

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

Angular Material 8/9 Tree Tutorial By Example

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

Angular 8/9 Image Slider with Lightbox using ng-image-slider Tutorial

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

Angular 8/9 | Custom Animation Tutorial by Example

Using Angular’s Animation package we can implement custom animation in our project which adds up a lot of value to the application by improving the way it behaves in front of users. Continue reading Angular 8/9 | Custom Animation Tutorial by Example

Angular | How to Get Dropdown Selected Text using Common Service Method

In Angular, we can easily iterate over the dropdown values using *ngFor directive and get the selected value using its model, but sometimes we have different properties for dropdown value and text which we need to show in options.

In that case, it becomes tricky to fetch the selected dropdown value’s text. Here we will create a service method that can be easily used anywhere in the application to fetch selected value text. Continue reading Angular | How to Get Dropdown Selected Text using Common Service Method

Angular 8/9 Autocomplete using angular-ng-autocomplete Package Tutorial by example

In general Autocomplete or Auto, suggestion control is used to show/ fetch related items from a local or remote server as user types to make a selection from available items.

In this tutorial, we will discuss the angular-ng-autocomplete package using which we can easily implement a fully-featured autocomplete without using any third party framework like Material or Bootstrap.

This package provides many inbuilt features to make Autocomplete control more user-friendly for a user. Continue reading Angular 8/9 Autocomplete using angular-ng-autocomplete Package Tutorial by example

Angular 7/8/9 | Angular EventEmitter and RxJs Subjects Quick Tutorial by Example

Data communication between components siblings or from Parent to child or vise-versa is possible by using many ways in Angular applications.

Sometimes we may need to pass data or any information to parent component from any of its child components in its hierarchy. For example, we have messages component which shows unread messages, now if we want to display the count on the header component.

In that case, we have two options available to do so. The EventEmitter available in angular core package and RxJS Subject provides observable which can be used to emit values to other components. Continue reading Angular 7/8/9 | Angular EventEmitter and RxJs Subjects Quick Tutorial by Example

Angular 8/9 | Custom Filter Pipe Get Child Values based on Parent Id Passed

In client-side applications, we may need to filter out a set of data based on some unique values of the property passed to it. This type of data set can be a list of items with a parent-child relationship where they need to refine the child results based on parent id in it.

In Angular applications, we can do so by using Filter Pipes which can be easily used on a data object with custom login. Continue reading Angular 8/9 | Custom Filter Pipe Get Child Values based on Parent Id Passed

Angular 7/8/9 | Search Pipe Filter using ng2-search-filter Quick Example Tutorial

Sometimes we may have a long list of items or data in tabular form which is added on the component for users. In that case, adding a simple filter search bar can prove a boon for a user to filter the required set of information.

The ng2-search-filter package provides a ready to use pipe filter to add search functionality nearly to any type of object data.

This package is very easy to use and implement.

Here we will look into the steps required to install the ng2-search-filter package and usage tutorial with some more tricks and tips. Continue reading Angular 7/8/9 | Search Pipe Filter using ng2-search-filter Quick Example Tutorial