Edit app.component.html

src/app/app.component.html

<div class="container">
<div class="row">
  <div class="col-md-6 offset-md-3">
    <app-task></app-task>
  </div>
</div>

</div>
    
                                

Edit task.service.ts

src/app/app/task/shared/task.service.ts

import { Injectable } from '@angular/core';
import {AngularFireDatabase,AngularFireList} from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  taskList: AngularFireList;
  constructor( private firebasedb:AngularFireDatabase) { }
  getTaskList() {
    this.taskList = this.firebasedb.list('taskList');
    return this.taskList;
  }
  addTask(task: string) {
    this.taskList.push({
      name: task,
      isChecked: false
    });
  }
  checkOrUnCheckTask(key: string, flag: boolean) {
    this.taskList.update(key, { isChecked: flag });
  }

  removeTask(task: string) {
    this.taskList.remove(task);
  }
}

                             

app.module.ts

Edit app.module.ts

Import the AngularFireModule and AngularFireDatabaseModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from '@angular/fire';
import {AngularFireDatabaseModule} from '@angular/fire/database';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {environment} from '../environments/environment';
import { TaskComponent } from './task/task.component';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

                             

Edit the file src/app/task/task.component.html

<div class="header">
  <h2>Create Task List - Using Firebase</h2>
</div>

<div class="input-group">
  <input type="text" class="form-control" #Task>
  <div class="input-group-addon hover-cursor" (click)="onAddClick(Task)">
    <i class="fa fa-plus-circle fa-2x"></i>
  </div>
</div>
<div class="taskList">
  <div style="margin:5px 0px">
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let task of taskListArray">
        <span class="hover-cursor" [class.text-success]="task.isChecked" (click)="onCheckClick(task.key,task.isChecked)">
          <i class="fa fa-lg" [ngClass]="task.isChecked?'fa-check-circle-o':'fa-circle-thin'"></i>
        </span>
        {{task.name}}
        <span class="hover-cursor text-danger pull-right" (click)="onDeleteClick(task.key)">
          <i class="fa fa-trash-o" style="font-size:28px;color:red"></i>
        </span>
      </li>
    </ul>
  </div>
  </div>

                                    

Edit the file src/app/task/task.component.ts

import { Component, OnInit } from '@angular/core';
import {TaskService} from './shared/task.service';

@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
  styleUrls: ['./task.component.css'],
  providers:[TaskService]
})
export class TaskComponent implements OnInit {
  taskListArray: any[];
  constructor(private taskService:TaskService) { }

  ngOnInit() {
    this.taskService.getTaskList().snapshotChanges()
    .subscribe(item => {
        
      this.taskListArray = [];
      item.forEach(element => {
        var x = element.payload.toJSON();
        x["key"] = element.key;
        this.taskListArray.push(x);
      })

      //sort array isChecked false  -> true
      this.taskListArray.sort((a, b) => {
        return a.isChecked - b.isChecked;
      })
    });
  }
  onAddClick(task) {
    this.taskService.addTask(task.value);
    task.value = null;
  }
  onCheckClick(task: string, isChecked) {
    this.taskService.checkOrUnCheckTask(task, !isChecked);
  }

  onDeleteClick(task: string) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.taskService.removeTask(task);
    }
  }

}

                                    

Edit the file src/app/task/task.component.css

.header {
    padding: 16px;
    text-align: center;
    background: #1abc9c;
    color: white;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .input-group-addon {
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #f7edf6;
    text-align: center;
    background-color: #423f3f;
    border: 1px solid #c9d0d8;
    border-radius: .25rem;
}
.taskList {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}