Image Cropping, Zooming, and Scaling with Angular and JavaScript

When building a web application there is a good chance you’re going to need to work with images eventually, even if it is something as simple as allowing a user to upload a profile image. In theory this is a simple task, but in reality, your website theme is probably anticipating images of a certain resolution or aspect ratio. If the user tries to upload an image that doesn’t meet your requirements, it might break your theme.

We’re going to see how to include image manipulation capabilities in your Angular application using the popular cropperjs JavaScript package.

Using Socket.io to Create a Multiplayer Game with Angular and Node.js

When it comes to client and server communication, there are quite a few approaches towards solving the problem. You could create a RESTful API or GraphQL API on your server and consume it on-demand with your client, or you can go the socket approach and interact in real-time through events. There isn’t a wrong way to do things, but some ways are better than others given the task at hand.

Let’s take for example gaming and online multiplayer games. While certain aspects of the game would make sense to use REST or GraphQL, not everything would feel responsive enough. Instead it makes sense to use sockets.

In this tutorial we’re going to explore Socket.io for our client and server communication. We’re going to create a Socket.io server with Node.js and that server will communicate with each of our games running as Angular applications.

Query A GraphQL API On Android And iOS With NativeScript And Angular

I’ve recently written several tutorials around GraphQL and there are more to come. However, most of these tutorials, including my eBook and video course, Web Services for the JavaScript Developer, have focused on the backend side of things and less of the frontend side of things. Knowing how to create a GraphQL powered API is great, but what if you need to query it from a client facing application?

In a recent tutorial I demonstrated querying a GraphQL API from a Vue.js web application, but what if we wanted to explore something with an Android or iOS mobile application?

In this tutorial we’re going to see how to create an iOS and Android mobile application using NativeScript and Angular and then query a GraphQL API from that application using numerous methods.

How To Build Reusable Angular Components And Share Them With The World

As you probably know, Angular is all about building UI components. There are several excellent component libraries out there that you can use to build your own application, such as Angular Material, Clarity or Kendo UI to name a few.

Such libraries provide common reusable components such as tabs, date pickers, collapsible menus, and much more. Still, there’s always a time where we need something more customized and more adapted to the specific needs of our project.

If you ever get in that spot where you want to create a component that might be reused in different projects, or if you want to write components that you would then open-source, this article is for you.

Angular Route Guards For Authorization In A Web And Mobile Application

You’re about to release your new Angular web app. It’s a photo sharing site and you want to test it, so you send a link to it to your hacker sister. She’s always messing with your stuff and she found out the URL to your admin page you added to your web app. Before you know it, she’s flushed your database using a button on that admin page that you didn’t restrict access to. Not a problem when using development data - but I’m sure your users wouldn’t be any too keen on a service where they lost all of their data. Let’s fix that

Including Attractive Charts In Your Angular Web Application

It’s probably obvious, but most modern applications crave data and in many of those scenarios, being able to visualize the data is a necessity. This is where charting and graphs become valuable within frontend applications. Having attractive charts in your application can make a world of difference and with a convenient library like Chart.js, it isn’t complicated.

If you’ve been keeping up, you’ll remember I wrote a tutorial titled, Use Chart.js to Display Attractive Charts in a Vue.js Web Application which focused on Vue.js. This time around we’re going to see how to include charts in an Angular web application.

Override The Android Back Button In A NativeScript With Angular Application

Have you ever needed to perform a certain action when the user tries to hit the back button or exit out of your application on Android devices? For example, what if the user was able to back out of your application and you wanted to show a dialog. Or what if you have a video application and you wanted to pause the video when they tap the back button?

Being able to override the functionality of the back button on Android can do great things for your application as long as you don’t abuse it.

We’re going to see how to create a mobile application with NativeScript and Angular that demonstrates overriding the back button on Android, whether that be hardware or software.