Last updated April 2, 2022

Angular Universal with Dynamic Metadata hosted on AWS Elastic Beanstalk, for Google SEO and for Link Preview to work for sub-pages

In this article I will show you how to convert an Angular SPA application to an Angular Universal application so that you may render your application on the server instead of the normal client-side rendering. Then I will show you how to add dynamic metadata for your routes to help the Google crawlers and enable different link previews for each route, and finally, how to host your Angular Universal application in AWS Elastic Beanstalk.

Written on December 23, 2021
Read More

Pre-process long-running API calls and publish via a BehaviorSubject in Angular

In this blog, I will go over how you can get API data in advance so that when the user gets to the page that needs the data, it will be there. This is useful when you have a potentially long-running API call and do not want to start the retrieval when the user arrives at the page because they will have to wait. Getting the data in advance will make the user experience more pleasant.

Written on December 20, 2020
Read More

Learn how to set up a database in MongoDB Atlas and connect to it using Node.js, with examples

In this blog, we will

  • Set up a MongoDB Atlas Account and database with credentials and connectivity
  • Code a schema using Mongoose in Node.js
  • Code a route and controller to add a database and document to MongoDB Atlas
  • Test the route using Postman to create the document
  • Code a route and controller to get documents from our database in MongoDB Atlas
  • Test the route using Postman to get the data
Written on August 30, 2020
Read More

Practical, real-world animation examples with Angular

In this blog, I will who show six examples of practical, real-world animations using Angular’s animation capability, and will explain in detail how they work. Here are the animations we will cover:

  • A slide-down animation exposing an Add Post component’s template
  • A fade in for the new post applied
  • A thumbnail photo that will expand smoothly to full-size when clicked and shrink back down when clicked again
  • An animation that will draw attention to an element
  • Two variations of animation when adding to a dynamic list. One will fade in. The other will slide in from the left.
  • Fade animation when changing routes, configured in one place
Written on July 26, 2020
Read More

Angular data binding

In this blog, I will explain the different types of data binding that Angular supports and show examples of each in a simple app.

Written on July 5, 2020
Read More

How to use service worker for an Angular progressive web app to work offline

In this blog, I will show you how you can add Service Worker to an Angular application and then configure it to work offline, including chaching some remote data. I will also show you how to do testing in your development environment and how to detect new versions of the service worker and notify the user that an update is available.

Written on June 14, 2020
Read More