Published in Netanel Basal

·15 hours ago

Using the Angular Router API without RouterModule

As part of the new standalone feature, Angular v14.2.0-rc.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…

Angular

1 min read

Using the Angular Router API without RouterModule

As part of the new standalone feature, Angular v14.2.0-rc.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…

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

Published in Netanel Basal

·Aug 3

Getting to Know the runInContext API in Angular

Angular v14.10 introduce the EnvironmentInjector.runInContext API. Using this function, we can run a function in the context of an injector. As a result, inject() is available within the function’s body for injecting dependencies when necessary. This functionality can be useful for designing ergonomic APIs in Angular and outside because it…

Angular

1 min read

Published in Netanel Basal

·Aug 2

Getting to Know the createComponent API in Angular

Angular v14.1 added a new function named createComponent. This function can cover the use-cases where the ComponentFactory symbol was previously used. The function allows creating a ComponentRef instance based on provided Component and a set of options: It’s possible to pass a new environment injector inherited from the current…

Angular

1 min read

Published in Netanel Basal

·Jul 29

Determine Why a Navigation Was Canceled in Angular

Angular v14.1.0 added a new property named code to the NavigationCancel event. It contains a code that indicates why the navigation was canceled. The code is an enum with the following options: NavigationCancellationCode.Redirect — A navigation failed because a guard returned a UrlTree to redirect. NavigationCancellationCode.SupersededByNewNavigation — A navigation failed because more recent navigation started.

Angular

1 min read

Determine Why a Navigation Was Canceled in Angular

Angular v14.1.0 added a new property named code to the NavigationCancel event. It contains a code that indicates why the navigation was canceled. The code is an enum with the following options:

NavigationCancellationCode.Redirect — A navigation failed because a guard returned a UrlTree to redirect.

NavigationCancellationCode.SupersededByNewNavigation — A navigation failed because more recent navigation started.

NavigationCancellationCode.NoDataFromResolver —A navigation failed because one of the resolvers completed without emitting a value.

NavigationCancellationCode.GuardRejected — A navigation failed because a guard returned false.

When navigation is canceled, we can determine the reason for the cancellation and perform different actions as needed:

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

Published in Netanel Basal

·Jul 28

A New Method for Retrieving Metadata about Angular Components

A new function named reflectComponentType() has been added to Angular v14.1.0 that returns the following metadata from a component: This function has several uncommon uses. It can be used to create debugging tools or, for example, we can use the selector metadata to create custom elements based on existing components: We can use it to create dynamic components based on a JSON file. The following thread contains additional use cases:

Angular

1 min read

A New Method for Retrieving Metadata about Angular Components

A new function named reflectComponentType() has been added to Angular v14.1.0 that returns the following metadata from a component:

This function has several uncommon uses. It can be used to create debugging tools or, for example, we can use the selector metadata to create custom elements based on existing components:

We can use it to create dynamic components based on a JSON file. The following thread contains additional use cases:

Alternative way for depreciation of ComponentFactory in order to get componentFactory inputs ·…Which @angular/* package(s) are the source of the bug? core Is this a regression? Yes Description Since Angular 13 the…
github.com

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

Published in Netanel Basal

·Jul 28

A New Way to Set Inputs on Angular ComponentRefs

When creating dynamic components in our applications or writing tests, we use the component reference instance property to change input values. For example: This approach does, however, come with four drawbacks: Setting input properties manually wouldn’t trigger the NgOnChanges lifecycle hook It’s challenging to test OnPush components since they…

Angular

2 min read

Published in Netanel Basal

·Jun 24

Create UrlTree from Any ActivatedRouteSnapshot in Angular

In the current Router API version (v14.0.0-), the UrlTree can only be created from an ActivatedRoute, which must both be active and materially appear in the UrlTree (meaning it cannot be an empty path named outlet). Due to the implementation of the current UrlTree creation process, the UrlSegment of the…

Angular

1 min read