Questions tagged [ngxs]
🚀 NGXS - Provides State Management for Angular apps based on a Event Sourcing model.
486
questions
0
votes
0
answers
8
views
Unable to upload SVG images using ngx-dropzone in Angular
I'm getting the below error when trying to select SVG images using ngx-dropzone.
0
votes
0
answers
13
views
How do I apply good action hygiene for NGXS actions that can allow for easier maintenance
The following is stated for action naming within NGXS's documentation
Actions are normally dispatched from container components such as router pages. By having explicit actions for each page, it's ...
1
vote
0
answers
12
views
Deeply nested state in ngxs
I found that we should avoid deep object graphs, and there is an example in the doc https://www.ngxs.io/recipes/style-guide#prefer-1. But I don't understand how to work with this when an item from one ...
-1
votes
1
answer
68
views
+200
What is the NgXS state flow here?
I am trying to understand the state flow of NgXS here in an Angular 12 application.
There is the service, which I believe performs the actual retrieval of configuration from the API:
@Injectable({
...
0
votes
0
answers
12
views
ngxs angular dispach action when thow graphql error
I'm trapping any errors I get when querying GRAPHQL, but now I need to fire an action using NGXS. the problem is that this error is from I handle a module and I don't know a way to do it from there
...
0
votes
0
answers
24
views
Properties of observable are undefined
I have an observable in my AppComponent:
@Select(MyState.config) config$: Observable<Config>;
This is populated with an Action:
@Action(GetConfig)
getConfig(ctx: StateContext<StateModel>) ...
0
votes
0
answers
11
views
What is the NGXS equivalent of NGRX's provideMockStore
I'm trying to Unit test a class, that uses a NGXS store(I'm not trying to unit test the store itself).
In NGRX, you have a provideMockStore(here). What would be the equivalent with NGXS?
For ...
-1
votes
0
answers
22
views
How to share the user state (profile) in all my application using NGXS
Kind regards, my doubt is based on how to share the value of the profile in different parts of my app, example: A user logs in and the profile property is filled with the user's data, but then in ...
0
votes
0
answers
22
views
Are the subscriptions of selectors in the ngxs library shared?
Does each subscription by async pipe in angular template to ngxs selector actually creates new stream or all streams are shared and its just one subscription?
I mean if selectors are piped like for ...
1
vote
1
answer
43
views
What could cause a "TypeError: (0 , d.__decorate) is not a function" of an angular function inside a docker container?
I'm building a web application. The frontend is in angular and the backend in .Net Core.
Currently, I'm doing the following, to build my final docker image:
Build angular app
Copy the built angular ...
0
votes
0
answers
15
views
How to change the default @@STATE key for storage plugin?
Because I used qiankun micro application framework in the project and used state management in each sub application, I must modify the value of @@STATE.
Is there any way to modify this value?
0
votes
1
answer
23
views
Persist text input via Angular NgXS
I have a component which I can navigate away from but I want the text input fields to maintain their values between these navigation changes.
The input looks like this:
<input type="text" ...
0
votes
1
answer
45
views
How to use one observable to update another
I'm trying to use an observable favourites$ when building another array of the same type. I am expecting that the favourites$ observable will be populated with the array of type Universty and that I ...
1
vote
0
answers
31
views
NGXS maintain a map of states instead of arrays
I'm looking into using NGXS for maintaining the current prices of tickers coming from the server. I might have a lot of symbols in the application so I'd rather be able to index into them using a hash ...
0
votes
1
answer
58
views
NGXS: Update deep level nested array state
So I have the following state:
[
{
name: "Main Tree",
branches: [
{
name: "Branch 1",
branches: []
},
{
name: &...
0
votes
0
answers
45
views
NGXS global state's slices emit on every navigation
After tracking down unexpected requests being made I've found that my app's global user state's slices emit upon every navigation.
What are potential causes of an NGXS state slice
emitting where its ...
1
vote
2
answers
50
views
How to test that an NGXS action has been dispatched, amongst some other tests?
I'm using NGXS with a facade pattern(basically, components have access to an angular service, and the angular service reference the store, dispatch the method if needed.
I'm in the process of testing ...
0
votes
0
answers
11
views
NGXS action test. Two method of same service used whitin the action
I have a very simple unit test of an NGXS action.
It tests whether it does not return an empty object.
The object is the result of an asyncronous call to a service method but it is true there is more ...
0
votes
1
answer
50
views
NGXS test for Angular-Test-Mode is broken in Angular 13
We are working on an Angular application that uses among other things Ngxs (version 3.7.3). Currently we are using Angular 12.2 and want to upgrade to Angular 13. We have successfully upgraded the ...
0
votes
0
answers
9
views
Dynamic action name based on place where it is triggered from
is it possible for better debugging to make the action name dynamic? for example, I have an action to add an item into the cart, but it can be triggered by multiple buttons. I want to know what button ...
1
vote
1
answer
52
views
With NGXS, what is the recommended way of calling the backend before calling the local state
I'm starting a new angular app and doing the setup for the team.
One thing I'm wondering: where do you put the logic to access the backend?
In my (first) case, about the accounts/auth, I need to store,...
0
votes
0
answers
57
views
How to synchronize state between diffrent tabs in NGXS
I have a problem with synchronize state between multiple tabs. Here is scenario. I have actions RefreshToken and RefreshTokenSucces to refresh user token. Eferything is working fine until I open my ...
0
votes
1
answer
137
views
Jest: Unexpected value 'NgxsRootModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation
I'm getting the following error when running a test in Jest, using Angular 13:
Unexpected value 'NgxsRootModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.
...
0
votes
0
answers
31
views
selectSnapshot value always getting undefined in angular
Hi I am using NGXS method in my angular Application. I am trying to assign snapshot value to a const. But it always getting undefined.
onDownload(){
const docs=this.store.selectSnapshot(docState....
1
vote
1
answer
34
views
How can I listen to multple actions in NGXS?
I'm in the process of converting an application from NgRX to NgXs. In NgRx, I could 'listen' to multiple actions in an effect and react appropriately to them. How can I accomplish this using NgXS?
In ...
0
votes
0
answers
33
views
How I can execute my Action Handler after the initialization of my state from my AppModule using Ngxs?
I'm using Angular 10 and Ngxs 3.7.
I need to dispatch an action when my app start. I used APP_INITIALIZER, but it does not works because when the action is dispatched (from the handler) the state is ...
0
votes
1
answer
66
views
How to use NGXS Select() in an angular component
I've an angular project with NGXS that I just setup.
In my AuthState, I've the following:
@Injectable()
export class AuthState {
@Selector()
static isAuthenticated(state: AuthStateModel) {
...
2
votes
1
answer
57
views
NGXS Forms - How to handle nested form components
I've got a user profile form with multiple steps, i.e. a wizard. On Submit/Save, the entire user profile form has to be submitted to an API
I'm using NGXS and NGXS Forms.
At the moment I have ...
0
votes
0
answers
32
views
How do I actually catch an exception triggered by an NGXS dispatch?
Our project has a system that displays an error modal to the user if an unhandled exception makes its way to the root. (If it matters, this sits in providers: [{provide: ErrorHandler, useClass: ...
0
votes
1
answer
33
views
Ngx-toastr, Unable to focus on it
I have purchased this theme for angular and they have changed the default view of ngx-toastr.
Everything is working fine but they have disabled focus on toast because of that I can't perform any kind ...
0
votes
1
answer
122
views
NGXS: loading and error messages in state
I'm new to NGXS and right now i'm trying to add on each of my state a loading and an error object. The easiest way would be to add a loading: boolean and an errors: {} on my state model.
But I decided ...
0
votes
0
answers
58
views
ngxs state composition triggers actions multiple times
I'm trying to use the composition feature for the states.
https://www.ngxs.io/advanced/composition
I have one state StateChild extending another state StateParent.
Now if I register both in ...
2
votes
3
answers
160
views
How to apply updateItem to multiple/all items in Ngxs?
I need an alternative to change the same attribute, with the same value, for all items in an array in Ngxs.
I tried to use updateItem(() => true, patch({ ... })), but it doesn't work because the ...
0
votes
0
answers
106
views
ngx-mat-select-search is not loading the data in dropdown after init
Reference used:
https://stackblitz.com/edit/github-yn8zve-xl2vcs?file=src%2Fapp%2Fexamples%2F01-single-selection-example%2Fsingle-selection-example.component.ts
Values are loaded into countrydropdown ...
1
vote
2
answers
45
views
Is there a way to isolate the NGXS store in a llibrary?
we are using the NGXS store in our application (=APP1):
NgxsModule.forRoot()
Now we separated part of that application into a library component / separate npm package (=LIB). This component also uses ...
1
vote
1
answer
63
views
How test (using NgXs) that an action was dispatched after dispatching another action, using ofActionSuccessful?
Component logic
this.actions$
.pipe(
ofActionSuccessful(ProjectLoad),
switchMap(() => interval(10000))
)
.subscribe(() => this.store.dispatch(new ProjecRefresh));
...
0
votes
1
answer
42
views
Angular | Typescript | ngxs state Observable: What does a variable ending with ! represent. @Select(someSelector) var $!: Observable<someType[]>> [duplicate]
In my TS file, i have a declaration like
import { Select } from '@ngxs/store';
@Injectable()
export class someService {
@Select(someSELECTOR) varName$!: Observable<someType[]>;
elements$ = ...
0
votes
1
answer
114
views
Facebook Like Button has width 0 in Angular App
TL;DR
I inserted the exact code that the Meta Developers Page for a Facebook Like Button generated into this CodePen but the Button does not show (width & height are both 0px)
The Goal
In our ...
0
votes
1
answer
527
views
Cannot find module 'src/app/services/session.response' or its corresponding type declarations [closed]
I have upload my project Angular on Stackblitz, the project works perfectly on Visual Studio Code.
But, when I open the project on Stackblitz, I have an error message:
Error in src/app/store/session/...
0
votes
1
answer
113
views
ngxs dispatch completes before async action completes
"@ngxs/store": "^3.7.2"
We are using ngxs with async actions. According to the documentation, both snippets (with await/without await) should be equivalent.
However, when ...
1
vote
1
answer
86
views
How to test NGXS selectors
Hi I am using NGXS state managment library in my App and I have selector like below and everything is working fine but when I am testing my app I have got error like below. PrintItemsState is lazy ...
0
votes
0
answers
94
views
What is a good way to handle server side pagination and loading the data to dropdown?
I am working on an Angular application. It fetches data from ASP.NET Core API, where server side pagination is implemented. In Angular application I have implemented state manager - NGXS.
I need to ...
0
votes
2
answers
107
views
Testing Angular component extending an abstract class
I have this setup for a number of components:
@Directive()
export abstract class BaseComponent implements OnInit {
@Select(PortalState.portal) public portalState: Observable<PortalModel>;
...
1
vote
2
answers
290
views
How can I Collapse/Expand Multiple Divs in ngx-virtual-scroll?
https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn
Here is what I have done so far, now I need to Expand/Collapse all divs which is after the group header.
0
votes
1
answer
81
views
NGXS Actions Observable Jest Expectation
Im currently facing a strange Behavior.
When I want to run multiple expectations on the store state after successful finishing the Store Action I'm unable to observe the reason of test failure.
If all ...
0
votes
1
answer
76
views
How do we get iframes to allow state changes to reflect in our components?
I'm building a component that uses an <iframe> to display another component. This component connects to an NGXS state which needs to reflect changes made to the state. After a lot of failures ...
0
votes
2
answers
296
views
Does NGXS check the store before fetching from the API?
So, I'm trying to use NGXS for the first time, and I noticed that when I add the following code in Angular's ngOnInit() function, it always fetches the API:
this.store.dispatch(new FooActions.GetAll())...
1
vote
1
answer
41
views
How should we define the StateModel of states that have sub states but no properties of their own?
Let's say we have a state that looks something like the example below but with a lot more properties.
export interface SomeStateModel {
ThingAProp01 : string;
ThingAProp02 : string;
...
0
votes
0
answers
230
views
Failure with infinite scroll, Angular
I find a bug in my code which allows yes, to do infinite scrolling but it does not update the data, so the same data is displayed over and over again, I don't know how to solve it, I am using the ...
2
votes
2
answers
171
views
RxJS timeout on NGXS Select Observable?
I am facing a strange issue and hoping someone can shed some light for me.
I have a slice of my state that is getting updated on an interval (let's say every 10 seconds for the sake of this question). ...