3 |
4 | 
23 | Angular 8+, NGXS 3.6.2+
24 | Article
2 | 3 |
4 |
18 |
19 |
5 |
6 | Article title
7 |
8 |
9 |
10 |
11 |
12 |
13 | Article category
14 |
15 |
16 |
17 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/integration/app/src/examples/article/dialog/article-dialog.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
2 | import { FormBuilder, FormGroup, Validators } from '@angular/forms';
3 | import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
4 |
5 | import { Article } from '../article';
6 |
7 | @Component({
8 | selector: 'article-dialog',
9 | templateUrl: './article-dialog.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class ArticleDialogComponent {
13 | public form: FormGroup;
14 |
15 | constructor(
16 | public dialogRef: MatDialogRef
10 |
11 |
12 | CountState
13 | 14 | PS: CountSubState will be persistence in sessionStorage15 | 16 |
Selection: 17 |
18 | 19 | counter.state$ = {{ counter.state$ | async | json }} 20 |
21 | 22 | counter.values$ = {{ counter.values$ | async | json }} 23 | 24 |
25 | 26 |
Actions: 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | counter model: 37 | 38 | 39 | (delay 300ms) 40 | 41 |
42 |
43 | 44 | subCount model: 45 | 46 | 47 | (delay 300ms) 48 | -------------------------------------------------------------------------------- /integration/app/src/examples/count/count.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | import { CountState } from './count.state'; 4 | import { CountSubState } from './count-sub.state'; 5 | 6 | @Component({ 7 | selector: 'count', 8 | templateUrl: './count.component.html', 9 | changeDetection: ChangeDetectionStrategy.OnPush 10 | }) 11 | export class CountComponent { 12 | constructor(public counter: CountState, public subCount: CountSubState) {} 13 | } 14 | -------------------------------------------------------------------------------- /integration/app/src/examples/count/count.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | import { NgxsModule } from '@ngxs/store'; 6 | 7 | import { CountComponent } from './count.component'; 8 | import { CountState } from './count.state'; 9 | import { CountSubState } from './count-sub.state'; 10 | 11 | @NgModule({ 12 | declarations: [CountComponent], 13 | imports: [ 14 | CommonModule, 15 | FormsModule, 16 | NgxsModule.forFeature([CountState, CountSubState]), 17 | RouterModule.forChild([{ path: '', component: CountComponent }]) 18 | ] 19 | }) 20 | export class CountModule {} 21 | -------------------------------------------------------------------------------- /integration/app/src/examples/count/count.state.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Immutable } from '@angular-ru/common/typings'; 3 | import { State, StateToken } from '@ngxs/store'; 4 | import { Computed, DataAction, Debounce, Payload, StateRepository } from '@ngxs-labs/data/decorators'; 5 | import { NgxsImmutableDataRepository } from '@ngxs-labs/data/repositories'; 6 | import { Observable } from 'rxjs'; 7 | import { map } from 'rxjs/operators'; 8 | 9 | import { CountModel } from './count-model'; 10 | import { CountSubState } from './count-sub.state'; 11 | import { ParentCountModel } from './parent-count-model'; 12 | 13 | const COUNT_TOKEN: StateToken
10 |
11 |
12 | Person state
13 | 14 |
15 |
18 |
--------------------------------------------------------------------------------
/integration/app/src/examples/person/person.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | import { PersonState } from './person.state';
4 |
5 | @Component({
6 | selector: 'person',
7 | templateUrl: './person.component.html',
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class PersonComponent {
11 | constructor(public person: PersonState) {}
12 | }
13 |
--------------------------------------------------------------------------------
/integration/app/src/examples/person/person.module.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { HttpClientModule } from '@angular/common/http';
3 | import { NgModule } from '@angular/core';
4 | import { RouterModule } from '@angular/router';
5 | import { NgxsModule } from '@ngxs/store';
6 |
7 | import { PersonComponent } from './person.component';
8 | import { PersonResolver } from './person.resolver';
9 | import { PersonService } from './person.service';
10 | import { PersonState } from './person.state';
11 |
12 | @NgModule({
13 | declarations: [PersonComponent],
14 | imports: [
15 | CommonModule,
16 | HttpClientModule,
17 | NgxsModule.forFeature([PersonState]),
18 | RouterModule.forChild([
19 | {
20 | path: '',
21 | component: PersonComponent,
22 | resolve: {
23 | content: PersonResolver
24 | }
25 | }
26 | ])
27 | ],
28 | providers: [PersonService, PersonResolver]
29 | })
30 | export class PersonModule {}
31 |
--------------------------------------------------------------------------------
/integration/app/src/examples/person/person.resolver.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Resolve } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 |
5 | import { PersonState } from './person.state';
6 | import { PersonModel } from './person-model';
7 |
8 | @Injectable()
9 | export class PersonResolver implements Resolve{{ person.title }}
16 |{{ person.description }}
17 |
10 |
11 |
12 | TodoState
13 | 14 | PS: TodoState will be persistence in localStorage (ttl: 30sec) 15 | 16 |
17 |
18 |
19 |
20 |
21 | -
22 |
- 23 | {{ todoItem }} 24 | 25 |