Type 'boolean' is not assignable to type 'Observable<Todo[]>' error while hiding the loading bar in Angular and typescript

Viewed 24
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.

0 Answers
Related