First, why do we need component-specific providers? Sometimes we need a 1:1 relationship between a component and a service. Services that are providedIn: "root" are application singletons (1:n). So, if we have two components we’ll have only one service instance. This doesn’t work in all scenarios. For example, if the service manages some private state, then two components using the same service can stomp on each other’s state value, or, if you’re doing reactive programming and creating a view model in a component that composes RxJS observables from a service that is specific to the component. …


Shouldn’t Grogu be in SWAPI by now?

How can you write an Angular Material Autocomplete component that is only valid when the user selects one of the available options containing the text the user has entered?

The Angular Material Autocomplete component provides an input and a pop-over list of options. Unfortunately, it doesn’t really auto-complete or select anything at all, and it doesn’t force selection to be one of the items in your list. So, how can we get really robust functionality out of this control?

TLDR; StackBlitz!

Let’s allow our user to select a Star Wars Character from a list. There are a lot of characters…


Image by James Osborne from Pixabay

Sometimes we just need to directly work with the DOM directly. I find this particularly so when doing things like scrolling to an element. How do you correctly leverage the document object in Angular?

import { DOCUMENT } from '@angular/common';@Component({...}) // could be a service too!
export class MyComponent {
constructor (@Inject(DOCUMENT) private document: Document) {}
}

That’s it. Now, why write an article on something so simple? For starters, the best way to learn something is to teach it. Done. In addition, I’ve been doing full-time Angular development since the early alphas of Angular 2. I consider myself…


Image by Photoshot from Pixabay

This is not intended to be a deep dive into media queries, but a primer to help understand some common way we use media queries as web-developers.

A media query is a bit of CSS that defines rules about when to apply a set of CSS definitions. It always starts with

@media

As web-devs we’re most concerned with the screen as our rendered output, so, almost always, we follow the @media with

screen

screen means that it applies to screen-based device like a phone, tablet, or computer screen. There are other options, but they are less-frequently used.

We would then…


Cube Image based on image by PIRO4D from Pixabay

Add style to your application by animating your route transitions!

For this article I’m going to assume you already understand the basics of Angular routing and components. I won’t bore you with building an entire application. We’ll get right to adding animations so you can see immediate results!

The finished code for this example can be found here.

Add BrowserAnimationsModule

In your app.module.ts add BrowserAnimationsModule to the module imports.

...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
...,
BrowserAnimationsModule
],
...
})
export class AppModule {}

A Note On Unit Testing

For unit testing, import NoopAnimationsModule instead. This fulfills the contracts while isolating unit tests from having to deal with the transitions.

Animation Affects User Experience

Have you ever…


I recently published an article about the compatibility opt-in preview version of Ivy in version 8 and what I experienced attempting to upgrade. This is a follow-on to show what the current upgrade path looks like using Angular v9.0.0-next.6 pre-beta, which contains optimizations for bundle size and performance as well as some bug fixes that were not present in v8’s preview.

As a reminder, Ivy is not ready for production. This is still a compatibility opt-in preview. Use at your own risk. Your mileage may vary.

I’ll be upgrading a large commercial application that leverages many third-party dependencies and a…


Angular’s new rendering engine, Ivy, holds great promise for the future of Angular and what we can do with it. Is your product ready for Ivy? With Angular v8 you can preview what your migration is likely to look like.

It is worth pointing out that Angular v8 Ivy is a tech preview and is not suited for production. Some of the items in this article will be fixed/changed with v9 and may have been already. I used the preview for its intended purpose, to determine whether or not we would have major issues in the near future and how…


Bazel is a build system from Google that allows for building just what changed, making larger builds much faster. Bazel has been used by Google for more than a decade. But, for Angular builds, Bazel is the shiny new kid on the block.

How will Bazel benefit you?

What do you need to do to get Bazel up and running in your projects?

First, how will Bazel benefit you? Simple. Faster builds. Much faster builds. The official Angular build went from 60 minutes to 7 using Bazel. Now, think about how many times during the day you do a build…


*ngIf and *ngFor will remove elements from the DOM. There isn’t a CSS solution for animating a non-existing element in the DOM. But Angular provides us with a simple solution.

For purposes of brevity, wherever I refer to *ngIf it is equally applicable to *ngFor. The complete, working code can be downloaded here.

Let’s start with the default application generated by the CLI and just modify the nice Angular logo in and out of the view based on a button we add.

ng new ngifAnimation

You won’t need routing and can select SCSS for the styling.

Let’s add the button…


Speed up your Angular load times!

Angular has allowed us to polyfill features back to browsers like IE 9, 10, and 11 for a while using the polyfills.ts file. With the introduction of Angular CLI 7.3 we get conditional polyfills, where we only ship the older polyfills to pre-ES2105 browsers. This results in a savings of about 56Kb. This won’t take you from average to superhero load times, but this is an easy optimization.

If you’re starting a new project, just make sure you have at least @angular/cli@7.3.0 installed globally via npm and ng new away!

If you have an older project there are a few…

Jared Youtsey

Passionate about JavaScript and Angular. Pure front-end development for the past eight years or so…

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