Lucky Note

Angular performs change detection on all components (from top to bottom) every time something changes in your app from something like a user event or data received from a network request. Change detection is very performant, but as an app gets more complex and the amount of components grows, change detection will have to perform […]

When binding to either the keyup or keydown events in your Angular 2+ templates, you can specify key names. This makes it very easy to trigger the event only when specific keys are pressed. First, let’s see an example without using a key name. Let’s say we want the event to be triggered only when […]

In our intro to the Angular router, we briefly saw how to navigate to a different route declaratively using the RouterLink directive. This post builds on that to demonstrate a few more examples, as well as how to navigate imperatively in the component class. RouterLink A basic example of using the RouterLink directive can look […]

It’s easy to create any kind of routing hierarchy in your Angular apps by using child routes in your router configurations. The following covers routing for Angular 2+ apps. All you need to define child routes is to add an array of additional route configuration objects as part of a children key in your parent […]

Want to get access to a child component, directive or a DOM element from a parent component class? It’s easy to do with the ViewChild decorator. ViewChild returns the first element that matches a given component, directive or template reference selector. In cases where you’d want to access multiple children, you’d use ViewChildren instead. The […]

Preloading modules in Angular is very similar to lazy loading, with the exception that the modules will be loaded immediately after all the eager loaded modules are ready. This eliminates the possible latency when navigating to a lazy loaded module, but still has the benefit of faster initial loading of the app because the initial […]

With lazy loaded modules in Angular, it’s easy to have features loaded only when the user navigates to their routes for the first time. This can be a huge help for your app’s performance and reducing the initial bundle size. Plus, it’s pretty straightforward to setup! The following covers lazy loading modules in Angular 2+ […]

Location is a service available in Angular 2+ apps that makes it easy to interact with the current URL path. For most navigation needs, the Angular router is the correct solution, but in a few cases the location service is needed to affect the url without involving the router. Plus, the location service can come-in […]

Apollo is a GraphQL client that makes it very easy to develop GraphQL applications with the likes of React and Angular. All you need to get started is a few dependencies and a client configuration, and you’ll be off to the races running queries and mutations against your GraphQL endpoints. You can refer to our […]

Reactive form instances like FormGroup and FormControl have a valueChages method that returns an observable that emits the latest values. You can therefore subscribe to valueChanges to update instance variables or perform operations. Take a look at our intro to Reactive Forms if this is all new to you. Here we’ll create a very simple […]