Angular 8/9 @Input, @Output and EventEmitter Tutorial by Quick Example

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

Show markers in draggable Radius on Angular Google Maps

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

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 Owl Carousel 2 Using ngx-owl-carousel-o Tutorial by Example

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

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