Angular: Elf facade base class implementation for utilizing store mechanics

What is the most effective way to access the store within a facade base class, allowing for the encapsulation of commonly used methods for interacting with the store?

Imagine we have a store (repository)

export class SomeRepository {
   private readonly store;

  constructor() {
      this.store = createStore()
 }
}

And we have a facade that extends from a base facade

export abstract class BaseFacade {
   protected store: ReturnType<typeof createStore>;

  constructor(protected store: ReturnType<typeof createStore>) {
      this.store = store;
 }

  setEntity(entity: SomeEntity) {
      this.store.update(setEntities(entity))
  }
}

With an implementation of a Concrete Class

@Injectable({ providedIn: 'root'})
export class SomeFacade extends BaseFacade {
     constructor(protected store: Store<SomeRepository>) {       <---- I am facing difficulties here, unsure how to utilize the store
      super(store)
 }
}

In a component

export class SomeComponent implements OnInit {
    constructor(private readonly facade: SomeFacade) {}

    ngOnInit() {
         const entity = { name: 'Jon', age: 30 };
         this.facade.setEntity(entity);   <----- This allows us to use methods from the abstract class without needing to implement them each time a Facade class is defined
    }
}

Answer №1

When it comes to design patterns, there are no absolutes in terms of right or wrong choices. The key is to select the approach that best suits your application.

In my practice, I tend to avoid implementing facades pattern altogether.

In developing my Angular Apps, I follow this specific workflow:

I rely on NGXS as my primary store solution. I have never experimented with elf

Component -> subscribes to state from Store -> Store leverages services for essential business logic operations.

Personally, I believe that using facade can introduce unnecessary complexity and obscure the code flow within an application. In my view, Angular DI + Provider offers sufficient capabilities.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate an Array of Objects into the UseState hook with an initial value

I have encountered an issue with the following error message: "Error: Objects are not valid as a React child (found: object with keys {fzfvhv76576, user }). If you meant to render a collection of children, use an array instead." I have been attem ...

Is there a feature similar to notifyWhenNoOutstandingRequests in Angular 2?

In my experience, test frameworks like Arquillian have utilized this method to determine when the DOM is ready for inspection with Angular 1. I am curious if there is a similar approach for accomplishing this in Angular 2? ...

Angular-cli and Chrome extension compatibility causing unexpected UI problems post-build

I developed an application with a sticky header at the top using angular2 mdl layouts. Recently, I made changes to the code to create a more customizable header. However, after building the app (ng build) and importing it as an unpacked extension, the con ...

Update the input for a component within the ngOnChanges method, and ensure that the OnPush change

I've encountered an issue with my Angular 6 application: The Dilemma Imagine I have two components: parent and child. The child component has two inputs. When one input changes, the child emits something to the parent within the ngOnChanges() lifec ...

Encountering a "undefined response" issue within an Angular

I am encountering an issue when trying to fetch data from a REST API. Upon logging the response, I am getting an undefined value. How can I resolve this? I have confirmed that the API is sending data by checking my network tab in the developer tool. getPro ...

Error: Issue with accessing the 'get' property of an undefined value (Resolved issue with incompatible imports not functioning)

Encountering an issue while attempting to execute the karma TS spec file. Despite all modules and imports functioning properly without conflicts, the error persists. I've tried incorporating component.ngOninit() into beforeEach() and it(), but to no a ...

Struggling with my initial Angular 2 project, having trouble showcasing data from an object. Any assistance would be greatly

As a newcomer to Angular 2, I am currently in the learning phase and utilizing tutorials and documentation from the official website. Below is the code snippet that I have been working on: import { Component } from '@angular/core'; export class ...

Why does the method of type assigning vary between actual and generic types?

There are no errors in the code shown below: type C = {b: string}; class Class { data: C; constructor(data: C) { this.data = data; } test() { const hack: C & {a?: any} = this.data; //no error } } However, when a g ...

When using Array.find() in TypeScript, the Subscribe function does not get called

I am currently diving into Typescript and web development, but I've encountered a peculiar issue when subscribing to an event that's leaving me stumped. In my service, I'm using a BehaviorSubject to store a carId, and on a page where there&a ...

Uncaught ReferenceError: jQuery is undefined" - Navigating the Angular and JavaScript Realm with

There is an Angular project that I am working on, and it utilizes the AvayaClientSDK consisting of three JavaScript files. While trying to import the AvayaClientSDK JS file into my component, an error message stating "jQuery is not defined" appeared. ...

Creating a React component that allows for pagination using data fetched from a

I have a Spring Boot endpoint that retrieves and lists items from a database: @RequestMapping(method = RequestMethod.GET, value = "/task", produces = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<?> processTask(@Valid TaskSearchP ...

Selecting an element in Angular2 that includes an ngIf directive

My example HTML code is below: <div id="foo" (mouseover)="blah()" *ngIf="isDisplayed"></div> Here is my JavaScript code: isDisplayed: boolean = false blah() { this.isDisplayed = true console.log(document.getElementById('foo')) ...

Angular's server-side routing is essential for custom localization functionality

I am currently working on localizing my Angular app. All the displayed values are stored in a single json file (stringResources.json). After translation, I will have individual files for each supported language (e.g. en.json, fr.json, etc). Since I utilize ...

The issue of Angular 6 view failing to display accurate data upon page load

In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user i ...

A guide to accessing a property value in Angular 6 from an object using a string key

In my Angular application, I am receiving an object with multiple arrays from a REST service. I need to access the value from the incoming object based on the property name. Here is what the object looks like: data{ array1:{}, array2:{}, array3:{} } Th ...

Inter-component communication in Angular

I am working with two components: CategoryComponent and CategoryProductComponent, as well as a service called CartegoryService. The CategoryComponent displays a table of categories fetched from the CategoryService. Each row in the table has a button that r ...

What is the functionality of the node class within a doubly linked list?

Within the Node class, the next property can only be assigned a value of type Node or null. class Node { value: any; next: Node | null; prev: Node | null; constructor(value: any) { this.value = value; this.next = null; this.prev = null ...

Is there a way to convert a File into a byte array and then save it in a database using Angular and ASP.Net Core?

Hey everyone, I'm fairly new to working with Angular and I've hit a roadblock when trying to implement file-upload functionality in my Angular application. The technologies I am using include Angular, ASP.Net Core, and Sqlserver. I am tasked wi ...

Comparing strings with data in objects using Angular

all. I have a query. What is the optimal method for comparing data? For instance, if you have a constant response = 225235743; And I aim to locate and exhibit all data in an object with the same ID as the one in this response. This needs to be resolved ...

The REST API seems to be functioning correctly when accessed through Postman, but there are issues when attempting to call

When I include @PreAuthorize("hasRole('ROLE_SUPER_ADMIN')") in my controller and make a call from Angular, it doesn't work. However, it works fine when called from Postman. @GetMapping("/getAllOrgniz") @PreAuthorize("hasRole('ROLE_SUPE ...