/
ui-two.component.ts
70 lines (61 loc) · 1.95 KB
/
ui-two.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Movie } from '../store/movie';
import { Observable } from 'rxjs';
import { MoviesService } from '../store/movies.service';
import { MoviesFacade, UiState } from '../store/movies.facade';
@Component({
selector: 'ui-two',
template: `
<div *ngIf="uiState | async as state">
<ng-container
*ngIf="state.status === 'Initializing'; then loading; else loaded"
>
</ng-container>
<ng-template #loaded>
<ng-container *ngIf="state.favorite; else noFavoriteTmpl">
<h1>{{ state.favorite!.name }} is your favorite</h1>
</ng-container>
<ng-template #noFavoriteTmpl>
<h1>Select a favorite</h1>
</ng-template>
<ng-container *ngIf="state.isLoading; then loading"></ng-container>
<ng-container *ngIf="state.anyMovies; then hasMovies; else noMovies">
</ng-container>
<ng-template #hasMovies>
<ul>
<li *ngFor="let movie of state.movies">
{{ movie.name }}
<button
(click)="onSelectFavorite(movie)"
[disabled]="state.isLoading || state.favorite?.id === movie.id"
>
Favorite
</button>
</li>
</ul>
</ng-template>
<ng-template #noMovies>
<h3>No movies are loaded</h3>
</ng-template>
<h3 *ngIf="state.error">There was an error: {{ state.error }}</h3>
</ng-template>
</div>
<ng-template #loading>
<h3>... Loading ...</h3>
</ng-template>
`,
styles: [],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class UiTwoComponent {
uiState: Observable<UiState>;
constructor(private service: MoviesService, facade: MoviesFacade) {
this.uiState = facade.uiState;
}
ngOnInit() {
this.service.get();
}
onSelectFavorite(movie: Movie) {
this.service.updateFavorite(movie);
}
}