Add Google Analytics to Angular application in 3 easy steps

Integrating Google Analytics stats with your Angular application is easy. Well, maybe it’s not as easy as it is for non-SPA websites but still it’s possible to do it really quickly.

In this short tutorial, I’m going to show you how you can connect your Angular app to Google Analytics in the 3 easy steps.

Continue reading Add Google Analytics to Angular application in 3 easy steps

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 10 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 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 10 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

Get your simple push notifications app with Ionic 4 and Firebase Cloud Messaging

Recently I needed a simple mobile app to test my simple push notifications service. In my case, it was an Android app receiving notifications from Firebase Cloud Messaging.

In this article, I’m going to share my experience with you. I’ll show you how you can create your own simple Ionic 4 Android app and integrate it with the FCM service.

But first of all, I’m going to start with disclaimers:

  • Please remember that this is only a simple starter example. To make sure your notifications behaving properly you have to store user subscriptions somewhere (for example in Firebase or local storage).
  • This article doesn’t cover the iOS platform but it’s possible to use FCM as your push notifications provider in iOS apps.

Main goals

We’d like our app to have the following features:

  • store devices tokens in the Firebase database
  • overall push notifications receiving
  • topic-based push notifications subscription / subscription

Continue reading Get your simple push notifications app with Ionic 4 and Firebase Cloud Messaging