Angular

app-store.service.ts

import { Action, Store } from '@ngrx/store';

import { AppState } from './app.reducer';

export abstract class StoreService {
  protected store: Store<AppState>;

  protected dispatchAction(action: Action) {
    this.store.dispatch(action);
  }

  /* in case you need to handle CRUD actions in all services
  these methods will need to be implemented by feature service */
  abstract dispatchLoadAction();
  abstract dispatchCreateAction(record: any);
  abstract dispatchUpdateAction(record: any);
  abstract dispatchRemoveAction({ id: any });
}

Elements

## 1. Create Application

```
ng g application --prefix=moo --routing=false --skip-tests elements
```
 
 
## 2. Add elements & polyfill

In order to have elements functionality available we need the Angular library and a polyfill — with the new CLI it’s just a matter of one(!) simple command:

```
 ng add @angular/elements
```

## 3. Create commponent test

```
ng g component button --project=elements
ng serve --project=alements -o
```

create file
`build-elements.js`

```js
const fs = require("fs-extra");
const concat = require("concat");
(async function build() {

    const files = [
        "./dist/elements/runtime.js",
        "./dist/elements/polyfills.js",
        "./dist/elements/scripts.js",
        "./dist/elements/main.js",
    ];

    await fs.ensureDir("elements");
    await concat(files, "elements/elements.js");
    await fs.copyFile("./dist/elements/styles.css", "elements/styles.css");
    await fs.copy("./dist/elements/assets/", "elements/assets/");

})();

```

commands scripts to packjon.json

"build:elements": "ng build elements --prod --output-hashing none && node build-elements.js && npm run serve:elements",
"serve:elements": "http-server -d -i -c-1 elements/"


# polyfills.ts

import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";


npm i @webcomponents/custom-elements -D
npm i concat -D



# APP modules

```ts
import {BrowserModule} from '@angular/platform-browser';
import {ApplicationRef, DoBootstrap, Injector, NgModule} from '@angular/core';
import {createCustomElement} from '@angular/elements';

import {AppComponent} from './app.component';
import {ButtonComponent} from './button/button.component';

@NgModule({
    declarations: [
        AppComponent,
        ButtonComponent
    ],
    entryComponents: [
        AppComponent,
        ButtonComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    // bootstrap: [AppComponent]
})
export class AppModule implements DoBootstrap {

    constructor(injector: Injector) {
        customElements.define('moo-root', createCustomElement(AppComponent, {injector: injector}));
        customElements.define('moo-button', createCustomElement(ButtonComponent, {injector: injector}));
    }

    ngDoBootstrap(appRef: ApplicationRef): void {
    }

}
```

init.md

Begin

ng new MyApp --prefix=ma --routing --style=scss --directory=webapp

cd webapp

ng add @angular/material

ng add @angular/pwa

npm i -s @angular/flex-layout @angular/cdk

import into AppModules

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

Install libs NGRX

npm install @ngrx/schematics --save-dev   
npm install @ngrx/{store,effects,entity,router-store,store-devtools} --save   

Configure ROOT NGRX

ng generate @ngrx/schematics:store State --root --module app.module.ts   
ng generate @ngrx/schematics:effect App --root --module app.module.ts   

ng generate module store/AppStore --flat   

ng generate @ngrx/schematics:store AppState --root --state-path store/reducer --module=store/app-store.module.ts  
ng generate @ngrx/schematics:effect store/App --root --group --module=store/app-store.module.ts --spec=false  

ng add @ngrx/router-store  --module store/app-store.module.ts  

Configure feature NGRX

ng config cli.defaultCollection @ngrx/schematics

ng g m venda/store/VendaStore --flat
ng g @ngrx/schematics:feature venda/store/Venda -m venda/store/venda-store.module.ts

listener-dispach-actions.ts

// [...]
import { Actions } from '@ngrx/effects';
// [...]

@Component(...)
class SomeComponent implements OnDestroy {
    destroyed$ = new Subject<boolean>();

    constructor(updates$: Actions) {
        updates$
            .ofType(PostActions.SAVE_POST_SUCCESS)
            .takeUntil(this.destroyed$)
            .do(() => /* hooray, success, show notification alert ect.. */)
            .subscribe();
    }

    ngOnDestroy() {
        this.destroyed$.next(true);
        this.destroyed$.complete();
    }
}

simple-redux.md

Simple Redux Store

Para criar um redux com root e as feature na mesma pasta do store, agrupadas por feature:

ng generate module store/AppStore --flat --project=booking
ng generate @ngrx/schematics:store AppState --statePath=store --root --module=store/app-store.module.ts --project=booking --dry-run
ng generate @ngrx/schematics:feature store/booking --flat=false --reducers=index.ts --spec=false --project=booking

Terá essa saida:

| | | | |____
| | | | |____app
| | | | | |____app.reducer.ts
| | | | | |____app.actions.ts
| | | | | |____app.effects.ts
| | | | |____app-store.module.ts
| | | | |____index.ts

simple-store.ts

// REF: https://jurebajt.com/state-management-in-angular-with-observable-store-services/
import {Observable, BehaviorSubject} from 'rxjs';

export class Store<T> {
    state$: Observable<T>;
    private _state$: BehaviorSubject<T>;

    protected constructor (initialState: T) {
        this._state$ = new BehaviorSubject(initialState);
        this.state$ = this._state$.asObservable();
    }

    get state (): T {
        return this._state$.getValue();
    }

    setState (nextState: T): void {
        this._state$.next(nextState);
    }
}

tasks.component.html

<mat-card>
  <app-task-form (createTask)="onCreateTask($event)"></app-task-form>
    <mat-spinner *ngIf="isLoading$ | async; else taskList" style="margin:0 auto;"></mat-spinner>
    <ng-template #taskList>
      <app-tasks-list
        [tasks]="tasks$"
        (remove)="onRemoveTask($event)"
        (edit)="onUpdateTask($event)">
      </app-tasks-list>
    </ng-template>
  <div class="error-msg" *ngIf="error$ | async as error">
    <p>{{ error }}</p>
  </div>
</mat-card>

sempre gerar no singular
ng generate @ngrx/schematics:entity --name main/wallet/Wallet --module wallet.module.ts --spec=false
ng generate @ngrx/schematics:effect main/wallet/Wallet --features --module main/wallet/wallet.module.ts --spec=false