Nx Conf 2022 Recap
Nx Conf 2022 is in the books, and it was great. The speakers were well prepared with practical examples of how to best use Nx to improve the maintainability and architecture of your applications. Here’s a brief overview of some of my favorite talks.
RxJS pipelines are convenient ways to get work done in your applications. You can essentially tell the app the steps it needs to take, and it will go step by step through the pipeline. But what if one of the steps will potentially be empty, but you want the pipeline to continue? That’s where the defaultIfEmpty operator can come in handy. I recently learned about it when I had a similar situation, and it worked perfectly for me.
Astro + Angular
Astro is a relatively new, all-in-one framework with the goal of creating performant, content-focused websites. The great part is that while there is some new Astro specific syntax you can learn, you can also bring your own frontend. Until recently, Angular was the exception to that rule. But with the release of standalone components to the Angular framework, you can now pair Astro and Angular together.
Reusable Component Pieces with ngTemplate Outlet
ng-template, ng-container, and ngTemplateOutlet provide the ability to reuse content inside an Angular component. Understanding what’s going on and how to use these methods allows a developer to build what they want without needing to duplicate parts of the template.
Angular Lifecycle Hooks
Each Angular component has a lifecycle that lasts from the time the component is added to the page until it is removed from the page. There are several times to hook into the lifecycle, where you can run some code necessary for the component. We’ll look at a few of the most common hooks.
Angular Typed Reactive Forms
Reactive forms in Angular are a convenient way to manage your forms and react to changes made by the user. One issue with them has been that the value of the form has not been typed. Because of this, you could improperly access a value from a form and not know until runtime. Angular v14 introduces typed reactive forms, and removes this potential issue.
Angular Standalone Components
For years, Angular has been organized and built on top of modules. These modules grouped functionality inside your app. Components, pipes, services, and directives that had related purpose were grouped together and declared inside modules, which would need to be imported in another part of the app to be used. With standalone components, the reliance on modules can be lessened.
Git Worktrees In Use
Most of us use Git every day, but generally use only the features that we are familiar with and allow us to do our job. There's nothing wrong with this at all, but learning new tricks can take your productivity up a level! With that in mind, let me introduce you to Git Worktrees.
Authenticating Your App for Cypress Tests
Many Angular apps require the user to be authenticated before using the app. This can make writing and running Cypress end to end tests difficult. If your login flow requires you to leave the app to authenticate, the problem becomes even more difficult. This article will cover a solution to this problem and allow you to write your Cypress tests.
Detecting Idle Users in Your Angular App
Occasionally the applications we work on need to react in a particular way if the user is inactive for a certain amount of time. For example, if the user is inactive for 5 minutes a popup should appear and ask the user if they want to stay logged in or if they want to log out. In this article, we'll look at a way to do that in your Angular app.
Share Interfaces in Angular and NestJS with Nx
I'm a big fan of using Nx and having multiple apps in a single workspace, especially when the apps have a lot in common and a lot of code to share. This is especially helpful when dealing with interfaces for data that your Angular app deals with, and either gets from or sends to the server. In this article, we'll talk about how to share those interfaces between the front and back end.
Multi Step Forms in Angular
Forms with multiple steps are common in web applications, but they can be difficult to organize and manage the data. Using reactive forms in Angular, however, it can be less painful. In this article we'll take a look at one way to manage multi step forms in your Angular app.
Pros of NestJS for Angular Developers
As an Angular developer, I have been looking for a backend framework that helped me to be as efficient as possible. I've tried a few different Node frameworks, but my new favorite is definitely NestJS. From the beginning, I felt right at home with the way NestJS encourages you to organize your code, including with modules, HTTP interceptors, pipes, and more.
The New Angular Dev Tools!
They're here! After a long time of people hoping and asking for some dev tools to work with their Angular apps, there is now a new Chrome extension for Angular dev tools. The Angular team has worked really hard on this, and I'm excited to introduce you to it in this blog post.
Angular & Tailwind: Q&A
I recently led a workshop on Angular and Tailwind for ng-conf 2021. The purpose was to introduce Angular developers to Tailwind, including how to implement it in your app and how to use Tailwind. A couple weeks after the event an attendee reached out with a couple questions and I decided to write an article about it.
Run Code when You Leave Your Angular App
We have all seen and likely used the ngOnDestroy lifecycle hook. But did you know it doesn't fire when the browser tab is refreshed or closed or the URL is changed to a new page? What do you do if you need to do some cleanup when the entire Angular app is destroyed? It turns out to not be too hard, and you'll learn how in this post.
Conditional Templates for Angular Components
One of the many benefits of working in Nx workspaces is the ability to share code between applications. In an Angular application, that means being able to share components between multiple applications. The problem is that different applications may have different design systems, even though the functionality is the same. I recently ran into this issue, and will go over a solution in this article.
Scully and Netlify CMS
Scully is great for building fast, static websites. If you have a technical background, adding content to the site is relatively easy. You can edit the HTML directly, or add new markdown files for new blog posts. But less technical users benefit from having a content management system to edit the content. Netlify provides a CMS option that you can use, and getting it set up with Scully is pretty straightforward.
Using Tailwind to Theme Your Angular App
One of Tailwind's best features is the ability to extend its color palette and other utility classes for your application. This functionality can be used to be able to dynamically change the theme of your Angular application. In this article, you'll look at how to create an Angular service that loads a theme as your app bootstraps.
Getting Started with Deno
Creating Custom Scully Plugins
Scully.io is a great tool for Angular developers. Its tagline is, "Scully makes building, testing and deploying JAMstack apps extremely simple." Essentially, you build your application in Angular and then Scully will take it and generate static HTML and CSS for you. Those assets can be deployed, and the end result is a high quality, blazing fast experience. In this post, we'll talk about how you can extend the default functionality of Scully to better suit your needs. Scully's plugin system makes adding that extra functionality much simpler than you may think, and you will learn how to create a plugin here.
Angular and Tailwind
TailwindCSS is one the most popular CSS frameworks on the market today. It makes building and styling modern sites easy by combining utility classes on your HTML elements. There is no set style with Tailwind like there are other CSS frameworks. It allows you to start from scratch and build the site exactly as you want.
Managing SVG Icons in Your Angular App
In the last couple years, SVG has become the preferred way of displaying icons in web applications. This is because SVGs can be scaled to any size without loss of quality, they can be changed to any color, and they can be animated. These are just a few of the benefits. The downside is that the SVG code is a little hard to manage and deal with in your application.
Introducing the @ngneat/dag Library
If you need to build a workflow of some sort, a good way to organize the model is by using a directed acyclic graph. DAG models can be used to store a lot of information, and they can be somewhat complicated. Essentially, the data is represented by vertices (which I call nodes throughout this article) and edges. The edges connect one node to another, and go from earlier to later in the sequence. This model works perfectly for building a workflow, and in this article you'll see how to use the @ngneat/dag library to manage a DAG model in your Angular application.
Using leader-line to Draw Lines Between Two Angular Components
Certain applications require a visual cue that two items are related. There are many ways to accomplish this effect, but one simple way is to use the leader-line NPM package. The package allows you to draw a line between two elements by just passing the elements to a constructor function. The library then takes over, allowing you to pass options for customization as well.
Deploying Nx Affected Apps from GitHub Actions
Having multiple apps in a Nx workspace is common and convenient, but when it's time to deploy the apps it can be difficult to only deploy the correct apps. Sure, you can deploy all the apps, but that's unnecessary and can cost more money by having CI/CD servers running for longer periods of time. If an app hasn't changed, it shouldn't be deployed. With Nx's tools, we can find out which apps are affected by a certain change, and only deploy those apps.
Running Nx Affected Commands in GitHub Actions
Working in an Nx monorepo over the last year has been really great. Sharing code between projects is really convenient. The only problem is that as you add more libraries and applications and projects, the time it takes to build or test applications grows as well. The good thing is that Nx monorepos come with a variety of commands that run on only portions of the codebase. For example, if your change only affects one library in your project, you can test just that library instead of the entire project. This is especially useful on your CI/CD server when you create pull requests. Tests can be run on the pull request branch, making sure that any new code is working and that it did not break any previous portions of the app. In this post, we will go over how to create a GitHub Action workflow to run the affected tests when a pull request is created.
Handling Falsy Values Emitted from Observables in Angular
In the last year or so, I've been fully embracing reactive programming in my Angular apps. That means goodbye subscribe and hello async pipe! It's been great, but there have been a couple times where the async pipe, in conjunction with the *ngIf structural directive, have not worked as I needed them to. The issue arises when the emitted value from the observable is falsy. When the emitted value is falsy, the *ngIf doesn't output the content on the screen. I understand why that happens, but many times the falsy value is a valid result and should be displayed. In this post, we'll cover an easy way to still use the async pipe and *ngIf, while still outputting falsy values.
Feature Flags in Angular
Many times when working on applications, especially with teams, multiple features are being worked on at the same time. They aren't all ready for deploy at the same time, though. At first blush, it seems like the only option is to hold off on deploys until everything is ready to go live, but there's no telling how long that could take. Also, in the meantime more features are added to the codebase. It's a never-ending cycle. But with feature flags, you can turn things off and on in different environments whenever you're ready. You can deploy to production at any time and just turn the feature flag off for a given part of the app.
Angular and Google Analytics
There are many times when we need to insert Google Analytics into our application to track what a user does or where they go in the application. Single page apps like Angular work differently, though, than a static site for example. This post will show you how to create a service that loads Google Analytics and sets up page view tracking for you.
Reactive Forms Benefits: Nested Form Groups
Many times when trying to collect data from users, the forms can get complex. It can be hard to know how to collect the data, and do so in the simplest manner, but I've found that reactive forms in Angular make it easier than I thought.
Using ng2-charts to Chart Date Based Data
Many Angular applications need to put data on a chart, and ng2-charts is a great option. There are several built in charts that just work. But you can also customize the charts quite a bit as well. In this post we'll learn how to chart your data by grouping it according to date.
Reactive Forms Benefits: Conditional Validation
Reactive forms in Angular have many benefits, but one that I've found especially useful is the fact that I can easily add or remove validation for a given field based on the value of another field. The simplicity of doing that allows us to create complex forms in a simpler manner.
Audio Recording Setup
A proper setup of the audio on your computer will make for great recording quality. Your listeners will hear nice crisp audio, and there won't be any fans or anything in the background. The great thing is you don't need to spend a fortune on equipment to get this quality. Using Audio Hijack and Loopback from Rogue Amoeba will help improve the quality of your sound output.
Any time we need to run the same code multiple times for a set of data, and don't want to just repeat the code over and over again, a loop is a perfect option. There are multiple types of loops, all of which accomplish a similar function but that go about it in a different manner.
Angular State Management in RxJS Services
Most Angular applications need some amount of state management. In some applications, a state management library like NgRX or Akita might make sense. But many times you can probably get away with storing application state in RxJS services. We'll go over how to do this using RxJS BehaviorSubjects and Observables.
Angular Configuration on Netlify
Almost every Angular application needs some configuration to run. It may be as simple as the API URL, or information needed for authentication. And many times these values change from environment to environment. So what are the options for providing this configuration in Angular apps when the app is deployed on Netlify? We'll go over a few options in this post, and hopefully one option works for you!
Getting Started with Netlify Functions
JAMstack sites are great, due to their simplicity to develop and deploy. Static sites are also great for SEO, and load quickly providing a great user experience. But sometimes we need our sites to get data or do things. Until recently, I thought that once I crossed that threshold of needing to do something on the site, I needed to deploy an entire application. Then I learned about serverless functions; more specifically, I learned about Netlify's option of serverless functions. And let me just tell you, they're great.
Creating a Docker Image with GitHub Actions
GitHub Actions are a perfect way to set up workflows to build applications, Docker images, and similar things on git repo actions. Those actions could be pushes to a branch, pull request creations or merges, or release tags. In this case, we'll create a Docker image that can be used for Angular applications. This same process can work for any image and for any registry, however, and could be adapted for other applications as well.
Reactive Forms Benefits: Validators
Reactive forms are a great option for capturing user input in an Angular application. They provide for a lot more flexibility in validation and reacting to input from users. In this article, we'll look at how easy it is to add custom validation to inputs using reactive forms in Angular.
Why Use Nx for Monorepos
Nx, by the folks at Nrwl, is a tool that assists in creating Angular, React, and full stack applications using Nest.js. It's especially helpful when working in a monorepo. A monorepo is a single repository that contains multiple projects, many of which share code amongst themselves. It can be tricky to configure your monorepo, but Nx makes it much easier.
Flexible Caching and Refreshing with RxJS in Angular
RxJS makes it easy to cache API calls and share the data to different parts of your application, but some API calls require parameters that can change at some point. But that doesn't mean that we don't want to cache data when possible, or build a gigantic array of cached data. Using RxJS and a little bit of logic, we can cache the most recent call and replay it with multiple subscribers and still have the flexibility of passing new parameters.
RxJS Caching and Refreshing in Angular
Some of the calls made to APIs in our Angular apps don't need to be made every time we need the data. The response from the server could be cached and used for a time, saving calls to the database and improving responsiveness of the site. Combining a few different parts of RxJS makes it easy to do just this.
Content Projection in Angular
Content projection in Angular allows you to pass content (HTML, other Angular components) into another component, making it more reusable. It allows you to make more reusable components that focus more on functionality than on UI. Then you can use them in different applications with entirely different UIs.
Angular CDK's BreakpointObserver
Every now and then we need to know the width of the browser window in our Angular component's class. We could write our own service to watch the resize event on the window, but the Angular team has us covered with a service in the CDK library. In this post we'll talk about how to use the service as well as when we might want to use it.
Unit Testing in Angular
Unit testing in Angular is an important part of the development process. If you're writing components, services, directives, etc and not writing unit tests to accompany them, you're setting yourself up for trouble. What happens when you refactor a function and accidentally break something? You go to production with that bug and then have to rush to fix it. But if you have comprehensive unit tests, you'll know about the bug and will be able to fix it well before going to production.
Directives and AfterViewInit
Angular's attribute directives are a great option for altering the output of an HTML element, but what happens when the content in the HTML element is output using interpolation? If not done correctly, the code inside the Angular directive will have been executed when there was not yet any text in the element. In this blog post, we'll explain this problem in more depth and will go over the solution to the problem.
Getting Started with Angular PWAs -- Part 2
After getting your PWA up and running, there are a couple techniques that come in handy when presenting information or updates to the user. This article will cover how to listen for app updates and present an option to the user to update, as well as presenting the user with an option to install the PWA on their device.
Getting Started with Angular PWAs -- Part 1
Progressive Web Apps are the future of providing a great mobile experience for users while at the same time not having to duplicate code by maintaining native app codebases along with a web application codebase. Even better news is how simple Angular has made it to get going in developing a PWA.
Getting Started with Angular Elements
Reusing code across projects is the goal, right? Write the code once, use it wherever you want, regardless of the framework or project. Angular elements is perfect for just this situation. Build components in a familiar manner, and then use it in your JAM stack app, React app, Wordpress Site, etc. Doesn't matter, just use it.
Using OnPush Change Detection and Updating the UI
Using the OnPush change detection strategy can bring great performance benefits to our application. But using this strategy instead of the default strategy changes how those components update their UI. Understanding how this works can save you a lot of headaches and problems.
Using Angular Route Guards to Limit Access by Roles
Many times we want to restrict access to our application based on a role that the user has. This is a perfect use case for Angular route guards. So how do you do that with Angular route guards? Calling the server in a route guard is easy enough, but getting the list of roles that need to be required is the tricky part.
Loading App Configuration in the APP_INITIALIZER
Loading runtime configuration in an Angular app can be a tricky problem to solve, but it's vital to be able to change the configuration of your app without having to rebuild the application. Many languages and frameworks already provide easy ways to do this, and now here's an easy way to do the same thing in your Angular applications.
App Config Editor Project
Announcing: a reusable starter project for adding and editing configuration for your apps, which can be stored in a database and loaded in your application. This gives you the ability to add/edit configuration as you need it, without having to store it in a file and keep track of the files on the server, etc.
ES6 Code in an Angular Project
TemplateRefs in Angular
Angular provides a great way to use the functionality of a component from a component library, but provide your own components to display anything that needs to display. It allows the component library to do all the logic, with the display half of the implementation of component coming by the developer who's using the library component.
Global Error Handling in Angular
The Angular JS Framework provides different ways for you as the developer to handle errors that occur in your application. Two of those ways are providing an ErrorHandler and providing an HttpInterceptor. You can handle errors here, and do different things with those errors.
ngGirls and ng-conf 2018
I've had a crazy 6 weeks since ng-conf, but man it was great this year. This was my third year, and it was probably the best year I've been. It gets better and better each year. One of the best parts was ngGirls on the Tuesday before the conference started.
If I Can Do It, You Can Too!
I've tried to write this post multiple times. I could never find the right way to word it though, or felt like nobody would care. But I was thinking about how my career has gone so far, and how lucky I feel, that I want to give one other person some hope. So hopefully this touches at least one person out there.
Finding an Object in an Array with Waterline
Sails.js is one of my favorite Node frameworks. There are a lot of built in advantages that make getting up and running quick, easy, and painless. One of the benefits is the ORM/ODM that it comes with, Waterline. There are a lot of adapters that allow you to use many different databases with your application and no need to rewrite the database access code.
Installing SQL Server for Docker
SQL Server is a powerful database option to use, but up until recently it's not been possible to use it unless you were on a Windows machine. Well, that's changed (along with many other Microsoft products). This week at work I decided to finally jump in and get SQL Server running on my Mac using Docker. Here's a quick recap of how I did this.
Configuring Angular Services
This week I needed to turn an Angular module into an npm package that I could import into multiple projects. The tough part was that in this module, there was a service that posts to a URL which needed to be configured. Luckily, Angular provides a pretty simple way to do this, although it did take a little time to learn exactly how to do this. Hopefully by the end of this blog post you'll be able to do the same in your app.
Angular HTTP Error Interceptors
Angular 4.3 introduced HTTP interceptors. This gives you the ability to handle every outgoing http call and every incoming response, all in one spot. Most of the examples I've seen out there cover the first, with each call having an authentication token attached to the call. I needed a way to handle and display errors on HTTP calls, and didn't want to put the error handling on every single call I make. This is a quick example of how to implement this in your app.
Vertical Centering HTML Elements
I don't know how many of you have tried to vertically center HTML elements before, but it can be a big pain in the butt. A coworker had once given me some hints and a couple of CSS classes that I could use to achieve it. It really wasn't easy though, and hard to have other people come behind and know what's going on.
ngConf 2016 Recap
Last week I attended my first ever developer conference. Or any conference, for that matter. ng-conf 2016 was a blast! I happened to get a chance to buy a ticket late, way after I thought I'd even have a chance at attending. At the beginning of April I got an email saying they had released one last round of tickets and I could buy one if I wanted. I jumped at the chance, and man am I glad I did! Luckily for me, my work was willing to foot the bill, and in turn it gave me the chance to go learn a lot and get fired up about Angular 2.
Getting Started with React.js
I decided I really needed to start learning React.js. It's the big thing these days, and I don't want to get too far behind, so I'm starting to get on the bandwagon. I still have access to Pluralsight, which has been great so far for other stuff I've been doing, so I'm going through some of their tutorials on there.
ST3 ASCII Replacer Plugin
I wrote my first Sublime Text 3 Plugin! Granted, it's nothing overly complicated, but it will save me a lot of time. I spend a lot of time copying and pasting text from Photoshop mockups, or from e-mails, or whatever it may be. I would then always forget to double check that the apostrophes, quotation marks, and ampersands were replaced with the proper plain text or html code versions.