Skip to content

get store-values in component #535

@ihrwebentwickler

Description

@ihrwebentwickler

Which @ngneat/elf-* package(s) are the source of the bug?

entities

Is this a regression?

Yes

Description

I have two components, offer.component puts an offer in its own store and uses a store filled by a service. When the show-offer component is called, these values ​​cannot be read from SelectedOffers. I do not understand that. I'm using the latest version of Elf and Angular 19.1.4

offers: Offer[] = this.offersRepository.getOffers(); has value "undefined"

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw


Please provide the environment you discovered this bug in

Interface:
import { Offer } from "../model/app";

interface OfferState {
  selectedOffers: Offer[];
}


Store:
import { Injectable } from '@angular/core';
import { Store, createState } from '@ngneat/elf';
import { addEntities, setEntities, withEntities } from '@ngneat/elf-entities';

import { Offer } from "../model/app";

const {state: assurancesState, config: assurancesConfig} = createState(withEntities<Offer>());
const offersStore = new Store({state: assurancesState, name: 'offers', config: assurancesConfig});

const {state: selectedState, config: selectedConfig} = createState(withEntities<Offer>());
const selectedOffersStore = new Store({state: selectedState, name: 'selectedOffers', config: selectedConfig});

@Injectable({providedIn: 'root'})
export class OffersRepository {
  setOffers(offers: Offer[]): void {
    offersStore.update(setEntities(offers));
  }

  getOffers(): Offer[] {
    return Object.values(offersStore.state.entities);
  }

  selectOffer(offer: Offer): void {
    selectedOffersStore.update(addEntities(offer));
  }

  getSelectedOffers(): Offer[] {
    return Object.values(selectedOffersStore.state.entities);
  }
}

Service:
import { inject, Injectable } from '@angular/core';
import { OffersRepository } from "../state/offer.repository";
import { Offer } from "../model/app";

@Injectable({providedIn: 'root'})
export class OffersService {
  offersRepository = inject(OffersRepository);

  mockOffers: Offer[] = [
    {
      id: 1,
      name: 'Leben direkt',
      assuranceId: "AAA1",
    },
    {
      id: 2,
      name: 'Auto Full',
      assuranceId: "CAR_Full",
    },
    {
      id: 3,
      name: 'Sach komplett',
      assuranceId: "SACH_COMP",
    },
    {
      id: 4,
      name: 'Angler direkt',
      assuranceId: "A1-angeln",
    }
  ];

  initOffers(): void {
    this.offersRepository.setOffers(this.mockOffers);
  }

  addOffer(offer: Offer): void {
    this.offersRepository.selectOffer(offer);
  }

  getSelectedOffers(): Offer[] {
    return this.offersRepository.getSelectedOffers();
  }
}

Offer-Component:
import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { OffersRepository } from "../../state/offer.repository";
import { JsonPipe, NgIf } from "@angular/common";
import { Offer } from "../../model/app";
import { OffersService } from "../../services/offers.service";

@Component({
  selector: 'app-offer',
  templateUrl: './offer.component.html',
  standalone: true,
  imports: [
    NgIf
  ],
  styleUrl: './offer.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OfferComponent implements OnInit {
  offersRepository = inject(OffersRepository);
  offersService = inject(OffersService);

  offers!: Offer[];

  ngOnInit(): void {
    this.offers = this.offersRepository.getOffers();
  }

  addOfferToSelection(offer: Offer) {
    this.offersService.addOffer(offer);
  }
}


show-offer.component
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { OffersRepository } from "../../state/offer.repository";
import { NgIf } from "@angular/common";
import { Offer } from "../../model/app";
import { OffersService } from "../../services/offers.service";

@Component({
  selector: 'app-show-offer',
  templateUrl: './show-offer.component.html',
  standalone: true,
  imports: [
    NgIf
  ],
  styleUrl: './show-offer.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShowOfferComponent {
  offersRepository = inject(OffersRepository);
  offersService = inject(OffersService);

  offers: Offer[] = this.offersRepository.getOffers();
  selectedOffers: Offer[] = this.offersService.getSelectedOffers();
}

Anything else?

No response

Do you want to create a pull request?

No

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions