Forem: Boris Jenicek

Angular Techniques: Injecting Singleton Services into Custom Classes

Boris Jenicek — Wed, 17 Apr 2024 09:48:10 +0000

How Angular's Dependency Injection Falls Short for Non-Service Classes

In Angular, dependency injection is primarily designed for services and components, facilitated through decorators like @Injectable() and @Component(). These decorators enable Angular to manage the creation and lifecycle of these objects. However, when you step outside this conventional use—into the realm of custom classes that are neither components nor services—you encounter a limitation. Angular's DI can't directly inject dependencies into arbitrary classes. This is where the Service Locator pattern comes into play as a workaround.

Setting Up the Angular Service Locator

The Service Locator pattern is essentially a manually created service that can access Angular’s injector itself. It acts as a central registry from which other parts of your application can retrieve dependencies. Here’s how to set it up:

Define the Service Locator Class:

   import { Injector } from '@angular/core';

   export class ServiceLocator {
     static injector: Injector;
   }

Initialize the Service Locator: Create a function to assign the Angular Injector instance to your ServiceLocator:

   export function setupServiceLocator(injector: Injector): void {
     ServiceLocator.injector = injector;
   }

Register a Provider for Initialization: To ensure that the Injector is available as soon as possible, you need to register an APP_INITIALIZER provider in your application module:

   import { ApplicationConfig, APP_INITIALIZER, Injector } from '@angular/core';

export const appConfig: ApplicationConfig = {
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: (injector: Injector) => () => setupServiceLocator(injector),
         deps: [Injector],
         multi: true
       }
     ]
   }

Example: Using Angular Services in a Custom Class

With the Service Locator set up, you can now inject Angular services into any class. Here’s a simple example demonstrating how to use this approach:

import { ServiceLocator } from './service-locator';
import { LoggerService } from './logger.service'; 

export class CustomClass {
  private logger: LoggerService;

  constructor() {
    this.logger = ServiceLocator.injector.get(LoggerService);
    this.logger.log('CustomClass initialized!');
  }
}

Why Use the Service Locator Pattern?

While this approach deviates from the typical Angular DI pattern, it provides a practical solution for extending dependency injection capabilities to any class within your Angular application. It's especially useful in large applications where you need to maintain clean architecture without excessively coupling your classes to Angular's components or services structure.

Simplify Angular DI with @ng-vibe/service-locator

If you're a fan of simpler, more streamlined approaches to managing dependency injection in Angular, you might be interested in a library I developed called @ng-vibe/service-locator. This library is designed to address the limitations of Angular's dependency injection for non-service classes, providing an elegant solution that supports both accessing singleton services and creating new instances dynamically.

Features of @ng-vibe/service-locator include:

Static Access to Services: Easily retrieve instances of any registered service from anywhere in your application.
Dynamic Service Creation: Create new service instances on-the-fly, scoped within their own injectors.
Simplified Service Management: Streamlines the use of Angular's injector, making it more accessible and easier to manage across your application.

Getting Started

To integrate @ng-vibe/service-locator into your Angular application, simply install the package via npm:

npm install @ng-vibe/service-locator

Then, configure it in your application module:

import { provideNgVibeServiceLocator } from '@ng-vibe/service-locator';

export const appConfig: ApplicationConfig = {
  providers: [
    ...,
    provideNgVibeServiceLocator(),
  ],
}

Example Usage

Here’s a quick look at how you might use @ng-vibe/service-locator to manage service instances effectively:

import { ServiceLocator } from '@ng-vibe/service-locator';
import { LoggerDummyService } from '../services/logger-dummy.service';

export class CustomClass {

  constructor() {
    const loggerSingleton = ServiceLocator.getInstance(LoggerDummyService);
    const loggerNewInstance = ServiceLocator.createService(LoggerDummyService);
  }
}

Wrap-Up

The @ng-vibe/service-locator library makes extending Angular's DI capabilities straightforward and intuitive, especially useful in large applications where maintaining clean architecture is crucial. It helps you manage dependencies without tightly coupling your classes to Angular's components or services structure. For more details and how to contribute, check out the project on npm.

Stay Connected

For updates and more insights, follow me on LinkedIn.

Project Repository: https://github.com/boris-jenicek/ng-vibe

Unleash the Power of Angular 17+ with Ng-vibe Open-Source Libraries

Boris Jenicek — Wed, 10 Apr 2024 16:04:46 +0000

Dive into my open-source Angular libraries for enhanced UI components and functionalities. Explore, contribute, and elevate your Angular projects with ease.

Zagreb, Croatia - Calling all Angular enthusiasts and developers! Get ready to supercharge your Angular 17+ projects with a collection of open-source libraries I've created just for you.

Hey there, it's Boris Jeniček here, greeting you from the picturesque city of Zagreb, Croatia. I'm deeply passionate about programming, especially when it comes to creating elegant, efficient, and reusable code. That's why I've embarked on this journey to develop a suite of Angular open-source libraries under the ng-vibe banner, specifically tailored for Angular 17 and beyond. These libraries are my gift to you—to not only enhance your Angular projects but also to invite you into a collaborative journey that promises to break new ground in the Angular world.

Why My Libraries? 🚀

In today's digital landscape, where user experience is king, having access to dynamic, easy-to-use UI components is more important than ever. That's where my open-source libraries come in. Designed to integrate seamlessly with Angular 17+, they offer a rich set of functionalities that can help reduce development time, boost performance, and, most importantly, create engaging and dynamic user experiences.

But that's not all. By embracing the open-source philosophy, these libraries are more than just tools; they're an invitation. An invitation to explore, to experiment, and to contribute. Whether you're a seasoned developer or just starting out, your insights, critiques, and contributions are what will propel these libraries forward.

Spotlight on ng-vibe Libraries

@ng-vibe/drawer: Say hello to dynamic drawer components that can be customized and controlled entirely through TypeScript. Say goodbye to static side panels and hello to interactive, animated drawers.
@ng-vibe/dialog: Dialog management has never been easier. With extensive configuration options for dimensions, animations, overlays, and more, creating and managing modals and pop-ups is a breeze.
@ng-vibe/toastify: Take feedback within your Angular applications to the next level with fluid, customizable toast messages. Designed for dynamic feedback and alerts, toastify offers multiple positioning and extensive customization options.
@ng-vibe/timer: Time is of the essence. Arm your Angular applications with a comprehensive timer library, perfect for progress or remaining calculations.

Join the Adventure - Contributing to ng-vibe ❤️

The open-source community thrives on collaboration and contribution. Whether you have a suggestion to improve a library, want to report a bug, or have the urge to develop a new feature—your input is invaluable. Fork the ng-vibe repository, dive into the code, and let your creativity lead the way. Don't forget to star the project and share it with other developers!

Getting Started with ng-vibe

Getting involved with ng-vibe is easy. Simply clone the repository, install the necessary dependencies, and explore the capabilities of each package. Whether you're looking to integrate a library into your project or contribute to its development, everything you need is right at your fingertips.

A New Chapter

As we embark on this open-source adventure together, I want to announce a significant change. My previous project, @costlydeveloper/ngx-awesome-popup, which has served us well, will now be passing the torch to ng-vibe. This transition marks a new chapter in our journey to provide the Angular community with tools that are not only powerful and flexible but also driven by the community.

The Road Ahead

The future of ng-vibe is bright, and it's paved with the contributions, feedback, and insights of developers like you. Let's make Angular development not just easier, but more enjoyable. Together, we can build something truly amazing.

I'm thrilled to see where this journey takes us. Let's code, collaborate, and create, one commit at a time. 🚀

Excited to see how these libraries can transform your projects? Or perhaps you're eager to contribute? Dive into the ng-vibe GitHub repository

ibe) or explore the libraries on npm to get started. Your feedback, contributions, and stars are what make the open-source community so vibrant and dynamic. Let's build something great together.

Remember, every line of code counts, and every contribution makes a difference. Happy coding!

Boris Jeniček - LinkedIn | GitHub

Software Developer, Open-Source Enthusiast, Angular Advocate

This blog post is just the beginning of what I hope to be a long and fruitful journey of collaboration and innovation within the Angular community. I can't wait to see where we go from here. Thanks for reading, and here's to the countless projects we'll elevate together with ng-vibe!

Ngx, Confirm box for Angular 🚀

Boris Jenicek — Wed, 27 Oct 2021 16:06:03 +0000

Today's topic is Confirmation dialog box in Angular. It's been a while since my last post, and this one might be pretty useful for Angular developers. In the following several passages I'll try to answer several questions:

What is the confirmation box in Angular?
What is the best confirmation dialog for Angular, and why?
How to integrate it into any Angular project?
How it looks like?

What is the confirmation box in Angular?

It is a simple popup that prevents unwanted actions, for example when the user clicks the delete button, the popup dialog should appear with the question: "Are you sure you want to delete item data?" and two buttons "Confirm" and "Decline". That is an enhanced level of security needed in almost every professional application.

What is the best confirmation dialog for Angular?

It is the ngx-awesome-popup an open-source library made for Angular. It provides highly scalable options and styles to adapt to any angular project. The best part is it's callable only from typescript so it can be used directly in services without HTML templates and it uses observables.

How to integrate it into the project?

1. install it to your angular project:


npm i @costlydeveloper/ngx-awesome-popup

2. Import in App.module.ts


imports: [

    NgxAwesomePopupModule.forRoot(), 

    ConfirmBoxConfigModule.forRoot()

]

3. Setup confirm box function / method


confirmBox() {

        const confirmBox = new ConfirmBoxInitializer();

        confirmBox.setTitle('Are you sure?');

        confirmBox.setMessage('Confirm to delete user: John Doe!');

        confirmBox.setButtonLabels('YES', 'NO');



        // Choose layout color type

        confirmBox.setConfig({

            LayoutType: DialogLayoutDisplay.DANGER // SUCCESS | INFO | NONE | DANGER | WARNING

        });



        // Simply open the popup and listen which button is clicked

        confirmBox.openConfirmBox$().subscribe(resp => {

            // do some action after user click on a button

            console.log('Clicked button response: ', resp);

        });

    }

4. Or use code generator

Confirm box code generator and specify your needs.

How does it look like?

Where to see more?

Confirm box - playground

Confirm box - StackBlitz

npm library

The community, Q&A

ngx-awesome-popup Interactive modals on steroids 🚀

Boris Jenicek — Mon, 24 May 2021 20:59:35 +0000

What is it?

It's the npm library made for the Angular 9+

What it does?

It provides:

Evoking dynamic components in popup
Toast Notifications
Alert Box
Confirm Box
Cookie GDPR banner

Why it is better than others?

It has:

Clean API
Better documented than others
Easy to use
d.ts files
Awesome snippet generator
Ability of global or local configuration
Predefined styles
Easy to change colors
Button generator
Simple and powerful Dependency Injection

Show me the API!

Okay

toastNotification() {
        const newToastNotification = new ToastNotificationInitializer();
        newToastNotification.setTitle('Title!');
        newToastNotification.setMessage('Message!');
        newToastNotification.setConfig({
            LayoutType: DialogLayoutDisplay.INFO // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        newToastNotification.openToastNotification$();
    }

confirmBox() {
        const confirmBox = new ConfirmBoxInitializer();
        confirmBox.setTitle('Title!');
        confirmBox.setMessage('Message!');
        confirmBox.setButtonLabels('Button1', 'Button2'); 
        confirmBox.setConfig({
            LayoutType: DialogLayoutDisplay.SUCCESS // SUCCESS | INFO | NONE | DANGER | WARNING
        });
        confirmBox.openConfirmBox$().subscribe(resp => {
            // button response
        });
    }

dialog() {
        const dialogPopup = new DialogInitializer(AnyAngularComponent);
        dialogPopup.setCustomData({myData}); 
        dialogPopup.setConfig({
            Width     : '500px',
        );

        dialogPopup.setButtons([
            new ButtonMaker('Submit', 'submit', ButtonLayoutDisplay.SUCCESS),
            new ButtonMaker('Cancel', 'cancel', ButtonLayoutDisplay.SECONDARY)
        ]);

        dialogPopup.openDialog$().subscribe(resp => {
            // button response
        });
    }

How does it look like?

Here's how!

Toast Notifications

Confirm box

Cookie banner

Where to see more?

Toast - playground
Toast - StackBlitz
Confirm box - playground
Confirm box - StackBlitz
Dialog - playground

Why did I make the npm library?

Boris Jenicek — Sat, 22 May 2021 20:25:13 +0000

First of all, many thanks for showing the interest in this article. 👀

In the next few passages, I will try to explain why in many Angular projects it is important to have good modal and notification features as well as why I wrote the npm library on that subject.

In the professional world, I have several years as an Angular developer behind me and a few more of developing in other technologies.

Web development abstract

Angular is for sure one of the worthy things that improved web development in the last ten years. The way it handles the view of the HTML and how it binds it with typescript is great.

The small minus is, like in almost any other framework which imposes their own structures, that the developers can be brought into the situation to just follow the basic imposed way of creating things. Often a framework dominates with architecture and the intended paths that should be followed. That does not mean that we should not think out of the box.

How is Angular doing it, out-of-the-box

As we know, Angular is providing an easy way to call another component from HTML with the tag selector to be rendered into the DOM. It also provides a way to call another component and render its view to the DOM, but only from typescript, which is called dynamic component creation and it's a bit more complicated way, but that does not mean it is not a good way, it's just harder.
That is where out-of-the-box thinking comes to the foreground, of course, it is not bad to use HTML component selectors but there are some use cases where it is better to use dynamic component creation. Under the hood, the Angular itself uses that same way, and we can choose how and from where we will evoke the component in the way the angular engine does it.

What can we do?

Here comes the modal story; what if we create a modal from the typescript method, what if the object itself can evoke the modal with a form to edit itself? That is a really nice use case now, and how is that good? For example, if we have a list of items and every item object has an update method, it can evoke the edit form component in the modal from any part of the application, and there is no need for an HTML selector. Wherever the "item object" is, and while it has an update method, it can evoke its own form and bring the popup to a predefined place on the screen.

There are more use cases. A similar thing is with notifications and confirm boxes. The app business logic is not always in angular components, we often make custom classes, services, or in redux architecture, for example, ngrx-effects. Take a look at an example in a service that has an HTTP server request, in case it returns an error it would be nice to evoke some kind of error message directly from there, and not coupling the logic with the component, the view.

Or another example when we want to delete an item, we need some kind of security system as a confirmation box and all we want to know what button is clicked by the user. Is it confirmed or declined so we know wether to delete the item. In the same way, confirm box can be called from any typescript method, and in that way it is more decoupled, it relies on the SOLID principles.

How it started?

In one period of my Angular work, I was requested to find the solution for one specific design pattern. It needed to keep the object reference while the object can be edited from any part of the application, to be modular and callable from typescript. I had read, spent many nights exploring how Angular material is handling the dynamic components, and after a while I got some knowledge about that topic and delivered the idea.

Time passed and I continued to research the topic from time to time and I decided to write a fully extendable library from scratch which rests on my knowledge of dynamic component creation in Angular.

I decided I want to make it modular and make three modules: Toast notification module, Confirm box module, and Dialog module. Every one of them will have its own logic but common inheritance; It will be highly scalable and easy to change without breaking the public API, and easy to extend with a new functionality; The uncompiled code will be publicly available, intuitive, open to contribution and understanding; It will have high-quality documentation and code examples to make it easy for other developers who will use it.

The library

With good motivation, and little more than a few nights, the code became the usable product, and code comments became the documentation.

I am happy to announce the library ngx-awesome-popup and invite every positive mood developer to contribute with any constructive suggestion, improvement, or bug finding.

Modules are separated as planned, it is a highly customisable and extensible solution, SOLID principles are respected in solid amount, it could even be more optimised in future. It implements a predefined user interfaces with many options for customisations, as well as public API exports such as enums, interfaces, d.ts files to help and make usage nice and easy.

The package is created with "ng-packagr" and API documentation is generated with "TypeDoc", the GitHub repo could be found here.

If you have endured up to there, WOW 😁 thank you for reading, and welcome to playground or StackBlitz.

Toast Notifications

Confirm box

Cookie banner

Toast - playground
Toast - StackBlitz
Confirm box - playground
Confirm box - StackBlitz
Dialog - playground

Related article