How to run long tasks in Angular environment injector

ByConnie Leung

Introduction Angular 14 introduced ENVIRONMENT_INITIALIZER token that enables developers to run long tasks during the construction of Angular environment injector. For standalone component, I inject the new token in the providers array and pass the provider to bootstrapApplication() function. Moreover, I found a use case of hierarchical dependency…

DOM reading and writing with new lifecycle hooks in Angular

ByConnie Leung

Introduction In Angular 16, Angular has added two new lifecycle hooks, afterNextRender and afterRender, for DOM reading and writing. According to the Angular documentation, afterNextRender is similar to AfterViewInit but it does not cause issues that AfterViewInit has in SSR. On the other hand, afterRender executes after every change detection to…

Mastering Angular’s Hierarchical Dependency Injection with inject() Function

ByConnie Leung

Introduction Before Angular 14, Angular achieves hierarchical dependency injection by injecting services in constructor and applying combination of @Host, @Self, @SkipSelf() and @Optional() decorators. In Angular 14, Angular team introduces inject() and it accepts inject options that can achieve the results. In this blog post, I am going to illustrate…

Power up host component by directive composition API in Angular

ByConnie Leung

Introduction In this blog post, I am going to illustrate how to use directive composition API to power up host component. Directive composition API is new in Angular 15 and it allows host component to register standalone directives to modify its appearance. Moreover, Angular developers can use standalone…

Render dynamic components in Angular using viewContainerRef

ByConnie Leung

Introduction In Angular, ngComponentOutlet is the simple way to render components dynamically. The other option is to render dynamic components using ViewContainerRef class. ViewContainerRef class has createComponent method that instantiates component and inserts it to a container. It is a powerful technique to add components at runtime; they are not loaded in main bundle to keep…

Render dynamic components the simple way in Angular – ngComponentOutlet

ByConnie Leung

Introduction In Angular, there are a few ways to render templates and components dynamically. There is ngTemplateOutlet that can render different instances of ng-template conditionally. When we use components, we can apply ngComponentOutlet to render the dynamic components the simple way or ViewContainerRef the complex way. In this…