Creating CloudFront distribution for your Angular app running on the S3 bucket

If you need to deliver your application quickly worldwide, then you can try to use CloudFront.

In this short text, I’m going to show you how easy it is, using the previously deployed Angular app as an example.

Using CloudFront for the websites hosted on the S3 is also a good idea when you need to use the domain which is not registered on Route 53 but on the external provider.

Continue reading Creating CloudFront distribution for your Angular app running on the S3 bucket

How to provide marker clustering on the Leaflet map in the Angular project πŸ—ΊπŸ“Œ

Showing multiple locations on a single map isn’t easy. Both from visual and performance point of view.

But fortunately, there’s a solution to this problem, called marker clustering. Basically, it’s about gathering points together in groups called clusters. Their size depends on current map zoom settings. It helps a lot when it comes to navigation through the map.

In this text, I’m going to show you how you can achieve it in your Angular project using the Leaflet map with Leaflet.markercluster library.

Continue reading How to provide marker clustering on the Leaflet map in the Angular project πŸ—ΊπŸ“Œ

Deploy your Angular application into an S3 bucket using Travis CI

In this blog post, I’m going to show you how can you set up the simple CI/CD pipeline for the Angular app.

The goal was to build the GitHub-based Angular project automatically with TravisΒ CI and deploy it into an S3 bucket, which is used to host a static website.

Let’s begin and learn how you can set it all up yourself.

Continue reading Deploy your Angular application into an S3 bucket using Travis CI

Passing data between Angular components with @Input

If you want to pass the data from parent to child components in Angular application, I hope this article will help you to find the answer.

Recently, I described the process of passing data between child and parent components in Angular using @Output and EventEmitter.

Now it’s time to show you the capabilities of @Input decorator for data sharing between parent and child components.

Continue reading Passing data between Angular components with @Input

Angular 10 with Leaflet map – geocoding using Nominatim API

Geocoding is the term used to describe the process of exchanging address into corresponding geographical data (coordinates).

If you’re looking for out-of-the-box geocoding services there are plenty of them. For example, you can consider the most popular one – Google MapsΒ Geocoding API which is pretty good but it’s not really free to use.

There’s a different solution, especially if you’re using OpenStreetMaps-related maps engine. It’s called Nominatim and basically it’s the OSM searching engine with open web API.

Continue reading Angular 10 with Leaflet map – geocoding using Nominatim API

Use Leaflet in your Angular 8 project for interactive maps

If you’re considering using interactive maps in your Angular application definitely Leaflet is a great choice. It’s open, easy to integrate with and has strong community support.

In my opinion, it’s the best alternative to the Google Maps. So, don’t lose the opportunity and check it yourself. I hope it will fit your needs.

Continue reading Use Leaflet in your Angular 8 project for interactive maps

Passing data between Angular components with @Output and EventEmitter

If you’re looking a way to communicate between Angular components I hope you’ll find your answer here.

In this article I’d like to show you how you can benefit from using @Output and EventEmitter in order to pass the data from child to parent component.

Continue reading Passing data between Angular components with @Output and EventEmitter