Making Injected Services Working Asynchronously

Image for post
Image for post
Photo by Pierre Bamin on Unsplash

If you spent enough time programming with Angular I bet there have been times you wished having a service of yours injected asynchronously.

Assuming you’re already familiar with the concept of dependency injection and how this works in Angular, let’s go straight to the pain point:

So, what to do when you need to wait for an asynchronous event before having your service ready for injection?

Well, it goes without saying you can either:


Breaking Free From The Same Origin Policy

Image for post
Image for post
Photo by Mateus Campos Felipe on Unsplash

Developing a single page application is fun, most of the time. Crafting the perfect piece of code to get the browser do what you want, instead of what has been designed for, gives you the thrill. At times, it will feel like being on a mission to rectify a browser’s misfortune such as in this article’s case.

Downloading Files

Immagine your application store files that you allow the users to download at times. …


Adding Emoji Support To Web Applications

Image for post
Image for post
Photo by James Lee on Unsplash

If you see a waving hand 👋🏻 it means you’re reading this article from a platform supporting emoji natively.

Good for you!

If not, you’re likely seeing a couple of little squares since the underlying text rendering engine doesn’t know how to process the Unicode codepoints describing the waving hand emoji.

With Microsoft Windows 10 joining the club and finally providing native support for emoji with the update on May 2019, we are one step closer to fill the “emoji divide” with macOS/iOS and Android.

However, there’s plenty of browsers around the world running on unfortunate operative systems still deprived of this essential feature, so, we must do something about it! …


Blending In The Smart Payment Buttons

Image for post
Image for post
Photo by Isiah Gibson on Unsplash

If you are familiar with the latest Smart Payment Buttons for PayPal Checkout you surely realize integrating this technology with Angular requires some degree of creativity:

Smart Button Client-side Integration

The piece of code above comes from the official PayPal developer’s documentation illustrating how to set up an order, capture the transaction while approved and follow it up server-side where supposedly you’ll be validating the transaction details.

The thing is the buttons are designed to set up and manage the payment flow using asynchronous callback functions some of which require you to interleave your own async calls to your server, so, you see how this may disrupt the typical Angular’s component-view model. …


Breaking Free From The Top Down Model

Image for post
Image for post
Courtesy of Angular

Angular is a brilliantly designed framework and we’re (usually) glad of structuring our web application by its rules.

Every Angular’s application is like a tree, so, that the parent template contains the children components and every child displays its content within its view only. And that’s usually fine.

However, what if we could enable children components to break through the limits of their own views, so, for them to display some of their widgets on a parent toolbar or pieces of information on a global status bar without data binding restrictions of any sort?

That’s what I call “teleporting” content.

Our Use Case

To demonstrate this idea, let’s imagine the following use…


Google Analytics with gtag.js

Image for post
Image for post
Photo by Webaroo.com.au on Unsplash

I recently wanted to include Google site tagging capabilities to a simple single-page application of mine and that’s what I came up with:

Using gtag

In the example above we see the GtagDirective at work (look closely in the .html).

The gtag="home" statement in the .html sends a page-view event to the Google Analytics, Google Ads or Google Marketing Platform account you configured during the initialization (more next).

The “home” text will appear in the report to be the page title while the page location is automatically detected by the directive provided the application makes use of a Router.

By simply adding this directive to every page of your app you’ll be tracking page views. …


Using IP Geolocation Services in Angular

Image for post
Image for post
Photo by Adolfo Félix on Unsplash

There are several IP-related information services out there offering to accurately locate users based on their IP, so, after a bit of digging, I decided to test both https://iplist.cc, providing country-level geolocation only but is totally free for both personal and commercial use, and https://ipinfo.io, a more professional service providing city-level geolocation with a generous 50.000 requests/month in their freemium tier.

The Simpler The Better

Performing the API calls is just one single line of code making it pretty easy by itself already, so I wondered… How can I make it even more easy to use in Angular?

Injectable Observables

Coming from a history of C++ programming I’m used to object’s inheritance (that’s not really a thing in Javascript) and I’m glad someone smart at Microsoft invented Typescript so I can use ‘extends’ every now and again like in this…


Router Tricks Series

When The Router Does More Than Routing

Image for post
Image for post
Photo by Shahadat Rahman on Unsplash

Imagine your app has a ‘Contact Us’ link and instead of routing to a dedicated page you’d like a contact form to popup instead.

There would be nothing wrong in hardcoding the ‘Contact Us’ button to do something different than navigating when clicked but wouldn’t it be nice having a way to instruct the router to do that ‘something different’ for us?

The greatest advantage in this would be having a unique way of treating all the links on a toolbar or menu, no matter if they’re expected to really trigger the navigation or do whatever else we need them to. …


Overcoming the Hangover after Mixing Up Angular with Stripe

Image for post
Image for post
Photo by Devon Janse van Rensburg on Unsplash

I’ve to confess I had some hard time pulling this out. I can tell Stripe.js v3 isn’t designed to get along with Angular (as opposed to v2 that integrated like a charm). Nevertheless, after several days of struggles, I’m quite satisfied with the result and I believe it’s worth an article :)

What you’re going to read about here is:


Styling Inline Text and Links Dynamically

Image for post
Image for post
Photo by Clark Tibbs on Unsplash

Once you go for loading the content dynamically into your single page application, you’ll likely face the “how the heck am I now suppose to style this content” dilemma:

The Styling Dilemma

In the first example above, we’re mixing up the actual content with the template, so, we can freely style the content as we wish, including embedding links.

As a downside, the content is static, meaning we’ll be forced to refactor the template in order to change the content.

The second example demonstrates a possible way of loading the content dynamically. Imagine the content object has been loaded from a json file so for the template to address the object properties. …

About

Lucio Francisco

I believe that whatever problem we’re puzzling ourselves with, once we really get to the bottom of it the solution has to be simple

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store