diff --git a/apps/angular/5-crud-application/src/app/app.component.ts b/apps/angular/5-crud-application/src/app/app.component.ts index 9152ff5e4..86f8ae5db 100644 --- a/apps/angular/5-crud-application/src/app/app.component.ts +++ b/apps/angular/5-crud-application/src/app/app.component.ts @@ -1,50 +1,46 @@ import { CommonModule } from '@angular/common'; -import { HttpClient } from '@angular/common/http'; -import { Component, OnInit } from '@angular/core'; -import { randText } from '@ngneat/falso'; +import { Component, inject, OnInit } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { AppItemComponent } from './todos/components/item.component'; +import { AppGlobalLoaderComponent } from './todos/components/loader-global.component'; +import { fetchTodos } from './todos/stores/todos.actions'; +import { + selectorFetchErroredGlobal, + selectorIsGlobalLoaderVisible, + selectorTodos, +} from './todos/stores/todos.selectors'; @Component({ - imports: [CommonModule], + imports: [CommonModule, AppGlobalLoaderComponent, AppItemComponent], + providers: [], selector: 'app-root', template: ` -
Error fetching todos
+ } @else if (isGlobalLoaderVisble()) { +There are no todos...
+ } + } `, styles: [], }) export class AppComponent implements OnInit { - todos!: any[]; - - constructor(private http: HttpClient) {} + private readonly store = inject(Store); + public readonly isGlobalLoaderVisble = this.store.selectSignal( + selectorIsGlobalLoaderVisible, + ); + public readonly hasErroredGlobal = this.store.selectSignal( + selectorFetchErroredGlobal, + ); + public readonly todos = this.store.selectSignal(selectorTodos); ngOnInit(): void { - this.http - .get{{ hasErroredLocalMessage() }}
+ } @else { + {{ todo().title }} + + + } +