import {Component} from '@angular/core';
import {Todo, TodoService} from "./todo.service";
import {Observable} from "rxjs";
@Component({
selector: 'app-root',
template: `
<div class="title">
<h1>
A list of TODOs
</h1>
</div>
<div class="list">
<label for="search">Search...</label>
<input id="search" type="text" ng-model="textcheck">
<app-progress-bar *ngIf="showme"></app-progress-bar>
<app-todo-item *ngFor="let todo of todos$ | async" [item]="todo"></app-todo-item>
</div>
`,
styleUrls: ['app.component.scss']
})
export class AppComponent {
// readonly todos$: Observable<Todo[]>;
// constructor(todoService: TodoService) {
// this.todos$ = todoService.getAll();
showme : boolean = false;
todos$ : Observable<Todo[]>;
constructor(public todoService: TodoService ) {
}
ngOnInit(): void {
this.showme = true;
this.todoService.getAll().subscribe(todos$ =>
{
this.todos$ =
this.showme = false;
}, err => { this.showme = false; });
}
}
I am absolutely new to Angular. And trying to hide my loading bar. But I am getting this error at this.todos$ =. I tried substituting like this this.todos$ = this.todoService.getAll(); then the error goes away. But that not how the loading bar should disappear. The loading bar is disappearing before loading the todo list. Which is wrong. Any kind of guidance / help will be appreciated.