# @zip-fa/angular-schematics

> Schematics for Angular

Latest version **0.0.6** (published 2022-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zip-fa/angular-schematics
pnpm add @zip-fa/angular-schematics
yarn add @zip-fa/angular-schematics
bun add @zip-fa/angular-schematics
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-08-19 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 135.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zip-fa |

## Links

- npm: https://www.npmjs.com/package/@zip-fa/angular-schematics
- Repository: https://github.com/zip-fa/angular-schematics
- Homepage: https://github.com/zip-fa/angular-schematics#readme
- Issues: https://github.com/zip-fa/angular-schematics/issues
- npm.io page: https://npm.io/package/@zip-fa/angular-schematics

## Dependencies (3)

- [typescript](https://npm.io/package/typescript.md) 4.7.4
- [@angular-devkit/core](https://npm.io/package/@angular-devkit/core.md) 14.1.3
- [@angular-devkit/schematics](https://npm.io/package/@angular-devkit/schematics.md) 14.1.3

## Recent versions

- 0.0.6 (latest) — 2022-08-19
- 0.0.5 — 2022-08-19
- 0.0.4 — 2022-08-19
- 0.0.3 — 2022-08-18
- 0.0.2 — 2022-08-18
- 0.0.1 — 2022-08-18

## README

<p align="center">
  <img src="https://habrastorage.org/webt/y2/m3/yt/y2m3ytqadzph9hos5taqwyp6axw.png" />
</p>

<h1 align="center">Schematics</h1>
  <p align="center">This repository contains schematics for generating NGXS Store in Angular apps using the Angular CLI.</p>
  <p align="center">
    <a href="https://travis-ci.org/ngxs/schematics">
      <img src="https://travis-ci.org/ngxs/schematics.svg?branch=master" />
    </a>
    <a href="https://badge.fury.io/js/%40ngxs%2Fschematics">
      <img src="https://badge.fury.io/js/%40ngxs%2Fschematics.svg">
    </a> 
    <a href="https://github.com/ngxs/schematics/blob/master/LICENCE">
      <img src="https://img.shields.io/badge/License-MIT-green.svg" />
    </a>
    <a href="https://codeclimate.com/github/ngxs/schematics/maintainability">
      <img src="https://api.codeclimate.com/v1/badges/f5c522a094a9303cac05/maintainability" />
    </a>
    <a href="https://codeclimate.com/github/ngxs/schematics/test_coverage">
      <img src="https://api.codeclimate.com/v1/badges/f5c522a094a9303cac05/test_coverage" />
    </a>
    <a href="https://greenkeeper.io/">
      <img src="https://badges.greenkeeper.io/ngxs/schematics.svg">
    </a>
</p>
  
## Installation

### Install Angular CLI

You should be using `@angular/cli@6.1.0` or newer.

```bash
npm i -g @angular/cli
```

### Install NGXS Schematics
```bash
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`.

```bash
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:

```bash
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`:

```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 <br />
`--spec` - flag that allow to generate the test file <br />
`--sourceRoot` - absolute path to create your files (in default - `src`) <br />
`--path` - path relative to `--sourceRoot` (for example, `--path=app` -> `/src/app`)


## Examples

### Create a NGXS Store
To generate store with `@ngxs/schematics`:

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

Result:

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

```

Or with spec:

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

Result:

```ts
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`:

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

Result:

```ts
CREATE src/todo/todo.state.ts

```

Or with spec:

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

Result:

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

### Create a NGXS Actions
To generate state with `@ngxs/schematics`:

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

Result:

```ts
CREATE src/todo/todo.actions.ts

```

## NGXS Starter Kit

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

```bash
ng generate @ngxs/schematics:starter-kit
```

Result:

```ts
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:

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

Result:

```ts
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
```

---
_Source: https://npm.io/package/@zip-fa/angular-schematics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._