Installation

Install Angular CLI

You should be using @angular/[email protected] or newer.

npm i -g @angular/cli

Install NGXS Schematics

npm i @ngxs/schematics

Easy way to add NGXS Store in your application

To add NGXS Store in application, you can use ng add with @ngxs/schematics.

ng add @ngxs/schematics

| Option | Description | --- | --- | --skipInstall | The flag to skip packages installing

Result:

Installed packages for tooling via npm.

  Adding npm dependencies

  ✅️ Added "@ngxs/devtools-plugin" into dependencies
  ✅️ Added "@ngxs/logger-plugin" into dependencies
  ✅️ Added "@ngxs/store" into dependencies
  ✅️ Added "@ngxs/schematics" into devDependencies

  Adding @ngxs/schematics to angular.json

  UPDATE package.json (2920 bytes)
  ✅️ Setting NGXS Schematics as default

  👏 Create your first ngxs store by using starter kit: ng g ngxs-sk --spec

  🔍 Installing packages...

Usage

Generating Components

You can use the ng generate (or just ng g) command to generate ngxs components:

ng generate @ngxs/schematics:store --name todo
ng g @ngxs/schematics:store --name todo

All possible commands in the table below:

| Scaffold | Usage | Aliases | Options | --- | --- | --- | --- | Store | ng g @ngxs/schematics:store | ngxs-store | --name (required), --path, --sourceRoot, --spec (boolean) | State | ng g @ngxs/schematics:state | ngxs-state | --name (required), --path, --sourceRoot, --spec (boolean) | Actions | ng g @ngxs/schematics:actions | ngxs-actions | --name (required), --path, --sourceRoot | Starter Kit | ng g @ngxs/schematics:starter-kit | ngxs-sk | --path, --sourceRoot, --spec (boolean)

Aliases

For used the aliases you need to set @ngxs/schematics as the default collection. Update your project's angular.json:

"cli": {
  "defaultCollection": "@ngxs/schematics"
}

Or simply use ng add @ngxs/schematics --skipInstall

Options

--name - there is a name of your store, state or actions --spec - flag that allow to generate the test file --sourceRoot - absolute path to create your files (in default - src) --path - path relative to --sourceRoot (for example, --path=app -> /src/app)

Examples

Create a NGXS Store

To generate store with @ngxs/schematics:

ng generate @ngxs/schematics:store --name todo

Result:

CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.ts

Or with spec:

ng generate @ngxs/schematics:store --name todo --spec

Result:

CREATE src/todo/todo.actions.ts
CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.ts

Create a NGXS State

To generate state with @ngxs/schematics:

ng generate @ngxs/schematics:state --name todo

Result:

CREATE src/todo/todo.state.ts

Or with spec:

ng generate @ngxs/schematics:state --name todo --spec

Result:

CREATE src/todo/todo.state.spec.ts
CREATE src/todo/todo.state.ts

Create a NGXS Actions

To generate state with @ngxs/schematics:

ng generate @ngxs/schematics:actions --name todo

Result:

CREATE src/todo/todo.actions.ts

NGXS Starter Kit

Usage

To generate store with @ngxs/schematics:starter-kit:

ng generate @ngxs/schematics:starter-kit

Result:

CREATE src/store/store.config.ts
CREATE src/store/store.module.ts
CREATE src/store/auth/auth.actions.ts
CREATE src/store/auth/auth.state.ts
CREATE src/store/dashboard/index.ts
CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
CREATE src/store/dashboard/states/user/user.actions.ts
CREATE src/store/dashboard/states/user/user.state.ts

Or with spec:

ng generate @ngxs/schematics:starter-kit --spec

Result:

CREATE src/store/store.config.ts
CREATE src/store/store.module.ts
CREATE src/store/auth/auth.actions.ts
CREATE src/store/auth/auth.state.spec.ts
CREATE src/store/auth/auth.state.ts
CREATE src/store/dashboard/index.ts
CREATE src/store/dashboard/states/dictionary/dictionary.actions.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.spec.ts
CREATE src/store/dashboard/states/dictionary/dictionary.state.ts
CREATE src/store/dashboard/states/user/user.actions.ts
CREATE src/store/dashboard/states/user/user.state.spec.ts
CREATE src/store/dashboard/states/user/user.state.ts