|
1 | 1 | ## Angular Usage |
2 | 2 |
|
3 | | -##### Overview |
| 3 | +This is the TypeScript version of Angular, which utilizes the TypeScript version of Stratus. |
4 | 4 |
|
5 | | -Core Types: |
6 | | - |
7 | | -* Component |
8 | | -* Directive |
9 | | -* Filter |
10 | | -* Service |
| 5 | +Note: This portion of the project is in heavy development and is subject to change. |
11 | 6 |
|
12 | 7 | ##### Component |
13 | 8 |
|
14 | | -More soon. |
| 9 | +A Component takes on a full HTML tag, as opposed to Directives which are accessible as a decorator inside another tag. |
15 | 10 |
|
16 | | -```js |
17 | | -// These examples will be expanded |
18 | | -if (tbd) console.log('tbd'); |
| 11 | +```html |
| 12 | +<sa-component></sa-component> |
19 | 13 | ``` |
20 | 14 |
|
21 | 15 | ##### Directive |
22 | 16 |
|
23 | | -More soon. |
| 17 | +A Directive is only a decorator for an HTML tag, as opposed to Components which are the entire tag. |
24 | 18 |
|
25 | | -```js |
26 | | -// These examples will be expanded |
27 | | -if (tbd) console.log('tbd'); |
| 19 | +```html |
| 20 | +<span saDirective></span> |
28 | 21 | ``` |
29 | 22 |
|
30 | | -##### Filter |
| 23 | +##### XHRs |
31 | 24 |
|
32 | | -More soon. |
| 25 | +We currently handle XHRs with our Data Service, inside your respective Component or Directive. |
33 | 26 |
|
34 | | -```js |
35 | | -// These examples will be expanded |
36 | | -if (tbd) console.log('tbd'); |
37 | | -``` |
| 27 | +```typescript |
| 28 | +import {FormBuilder, FormGroup} from '@angular/forms'; |
| 29 | +import {BackendService} from '@stratus/angular/backend.service'; |
| 30 | +import * as _ from 'lodash'; |
| 31 | + |
| 32 | +@Component({ |
| 33 | + selector: 'sa-data-component', |
| 34 | + templateUrl: 'data.component.html', |
| 35 | +}) |
| 36 | +export class DataComponent implements OnInit { |
| 37 | + |
| 38 | + filteredOptions: any[]; |
| 39 | + dialogForm: FormGroup; |
| 40 | + isLoading = false; |
| 41 | + lastSelectorQuery: string; |
| 42 | + |
| 43 | + content: any; |
| 44 | + url: string; |
38 | 45 |
|
39 | | -##### Service |
| 46 | + constructor( |
| 47 | + private fb: FormBuilder, |
| 48 | + private backend: BackendService |
| 49 | + ) {} |
40 | 50 |
|
41 | | -More soon. |
| 51 | + ngOnInit() { |
| 52 | + this.dialogForm = this.fb.group({ |
| 53 | + selectorInput: this.content |
| 54 | + }); |
42 | 55 |
|
43 | | -```js |
44 | | -// These examples will be expanded |
45 | | -if (tbd) console.log('tbd'); |
| 56 | + this.dialogForm |
| 57 | + .get('selectorInput') |
| 58 | + .valueChanges |
| 59 | + .pipe( |
| 60 | + debounceTime(300), |
| 61 | + tap(() => this.isLoading = true), |
| 62 | + switchMap(value => { |
| 63 | + if (_.isString(value)) { |
| 64 | + this.lastSelectorQuery = `/Api/Content?q=${value}`; |
| 65 | + } else { |
| 66 | + this.content = value; |
| 67 | + this.url = null; |
| 68 | + } |
| 69 | + return this.backend.get(this.lastSelectorQuery) |
| 70 | + .pipe( |
| 71 | + finalize(() => this.isLoading = false), |
| 72 | + ); |
| 73 | + } |
| 74 | + ) |
| 75 | + ) |
| 76 | + .subscribe(response => { |
| 77 | + if (!response.ok || response.status !== 200 || _.isEmpty(response.body)) { |
| 78 | + return this.filteredOptions = []; |
| 79 | + } |
| 80 | + const payload = _.get(response.body, 'payload') || response.body; |
| 81 | + if (_.isEmpty(payload) || !Array.isArray(payload)) { |
| 82 | + return this.filteredOptions = []; |
| 83 | + } |
| 84 | + return this.filteredOptions = payload; |
| 85 | + }); |
| 86 | + } |
| 87 | +} |
46 | 88 | ``` |
0 commit comments