Published in Netanel Basal

·Sep 19

Running Initialization Functionality in Angular

In one of my previous articles, I showed how to run a global functionality without cluttering up your components. Now that we have the ENVIRONMENT_INITIALIZER provider let’s look at how I use it on both the root and feature components. In case you are unfamiliar with this provider, you can…

Angular

1 min read

Published in Netanel Basal

·Sep 2

Angular DI: Using Inject Instead of Constructor

As we learned in my previous article, we can now use the inject() function inside components, directives, and pipes. Here are the reasons I chose it over the constructor for dependency injection. The first thing I noticed is that it is cleaner and more readable: Next, the provider’s type is automatically inferred: Additionally, directiveInject() is used in the compiled code anyway: Lastly, the Angular team appears to be heading that way. We can see the inject() usage in the new NgOptimizedImage directive, for example:

Angular

1 min read

Angular DI: Using Inject Instead of Constructor

As we learned in my previous article, we can now use the inject() function inside components, directives, and pipes. Here are the reasons I chose it over the constructor for dependency injection. The first thing I noticed is that it is cleaner and more readable:

Using constructor

Using inject()

Next, the provider’s type is automatically inferred:

Auto inferred

Additionally, directiveInject() is used in the compiled code anyway:

Compiled code

Lastly, the Angular team appears to be heading that way. We can see the inject() usage in the new NgOptimizedImage directive, for example:

NgOptimizedImage

My main concern is consistency. I’d like to see an eslint plugin that helps with that.

Follow me on Medium or Twitter to read more about Angular and JS!

Published in Netanel Basal

·Aug 30

Using React in Angular Applications

Two scenarios call for the use of React in an Angular application. First, there is a component in the React ecosystem that will take us weeks to develop, for example, a Timeline component. …

Angular

3 min read

Published in Netanel Basal

·Aug 29

Create a State Management In React

In this article, we’ll create a simple yet efficient state management for React. We’ll not use the Context API because it can quickly become a mess and a performance bottleneck. Further, we want to decouple ourselves from React as much as possible. Let’s start with the Store implementation: A…

React

2 min read

Published in Netanel Basal

·Aug 22

Accessible Lists Made Easy Using the Angular CDK Listbox Module

Although we get most of the functionality from Angular CDK, we need to write quite a bit of code to build accessible lists. One of my previous articles discusses it in more detail: Accessibility Made Easy with Angular CDK Keyboard focus and navigation are essential when developing for the accessible web. Many users rely on a keyboard when…netbasal.com Fortunately, starting from version 14.2.0, this is made seamless by the Angular CDK. A new module named…

Angular

2 min read

Published in Netanel Basal

·Aug 18

Using Angular NgOptimizedImage to Implement Image Loading Best Practices

The NgOptimizedImage directive in Angular is responsible for implementing performance best practices when loading images. It’s available in Angular v14.2.0. The directive is marked as standalone and can be imported into standalone components and modules. To use it, we should replace our image’s src attribute with rawSrc: The directive…

Angular

2 min read

Published in Netanel Basal

·Aug 17

Using the Angular Router API without RouterModule

As part of the new standalone feature, Angular v14.2.0 introduces a new method to use the Router API that doesn’t require using RouterModule. Using the RouterModule, we pass extra options through a config object, for example: We can now use these options by using feature functions: The significant benefit of using this approach is that these features are now tree-shakable. In tests, we can use the provideRouterForTesting() function as follows:

Angular

1 min read

Using the Angular Router API without RouterModule

As part of the new standalone feature, Angular v14.2.0 introduces a new method to use the Router API that doesn’t require using RouterModule.

Using the RouterModule, we pass extra options through a config object, for example:

We can now use these options by using feature functions:

The significant benefit of using this approach is that these features are now tree-shakable.

In tests, we can use the provideRouterForTesting() function as follows:

Follow me on Medium or Twitter to read more about Angular and JS!

Published in Netanel Basal

·Aug 10

Add Keyboard Shortcuts to Your Angular App

Angular provides a special syntax for registering keyboard events. A keyboard event can be bound to a specific key or code. It’s assumed by default that you’ll use the key field on the keyboard event. Combinations of keys can be used by separating them with a period. For example, keydown.enter…

Angular

2 min read

Published in Netanel Basal

·Aug 9

Lazy Load Services in Angular

Imagine we have a large service with many dependencies and logic. It should only be used when a user performs a specific action, such as clicking a button. It’s possible to defer the loading and parsing of the service by lazy loading it when the action is performed. Let’s…

Angular

2 min read

Published in Netanel Basal

·Aug 7

Getting to Know the createApplication API in Angular

Angular v14.2.0 introduce a new function named createApplication. The createApplication function creates an application instance without bootstrapping any components. It is useful when one wishes to decouple or delay the rendering of components and/or render multiple root components in one application. Custom element types can be created using this API…

Angular

2 min read