If you spent enough time programming with Angular I bet there have been times you wished having a service of yours injected asynchronously.
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:
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.
Immagine your application store files that you allow the users to download at times. …
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! …
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:
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. …
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.
To demonstrate this idea, let’s imagine the following use…
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:
In the example above we see the GtagDirective at work (look closely in the .html).
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. …
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.
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?
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. …
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:
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:
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. …