To-Do App with angular 7 and firebase

Set up firebase

Login to firebase click here.

Create a project

Change the database rule

Publish the rule

get the configuration code and past in your enviornment.ts file

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

Set up your angular app

ng new todo-app

set up the angular & install the below package

npm install firebase @angular/fire --save

Import in @NgModule

import { AngularFireDatabaseModule } from '@angular/fire/database';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { TodoComponent } from './todo/todo.component';

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

Create a todo component & to do service

// Create component
ng generate component todo

// Create service
ng generate service todo

todo.service.ts

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

@Injectable()
export class TodoService {

  toDoList: AngularFireList<any>;

  constructor(private fireDb:AngularFireDatabase) { }

  // Get the data
  getToDoList(){
    this.toDoList = this.fireDb.list('titles')
    return this.toDoList;
  }

  // Insert data
  addTitle(title:string){
    this.toDoList.push({
      title:title,
      isChecked:false
    })
  }
  
  // Check the status
  checkOrUnCheckTitle($key:string, flag:boolean){
    this.toDoList.update($key, { isChecked: flag});
  }
  
  // Delete the item
  removeTitle($key:string){
    this.toDoList.remove($key);
  }
}

todo.component.html

<div class="input-container">
  <input type="text" #itemTitle>
  <button (click)="onAdd(itemTitle)">ADD</button>
</div>

<ul>
  <li *ngFor="let item of itemList">
    <span class="list-check-icon" (click)="alterCheck(item.$key, item.isChecked)">
      <i class="material-icons">{{item.isChecked?'radio_button_checked':'radio_button_unchecked'}}</i>
      <span class="list-text">{{item.title}}</span>
    </span>
    <span class="list-delete-icon" (click)="onDelete(item.$key)">
      <i class="material-icons">delete</i>
    </span>
  </li>
</ul>

todo.component.ts

import { TodoService } from './../todo.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss'],
  providers: [TodoService]
})
export class TodoComponent implements OnInit {

  itemList: any[];
  constructor(private todoService: TodoService) { }

  ngOnInit() {
    this.todoService.getToDoList().snapshotChanges()
      .subscribe(item => {
        this.itemList = [];
        item.forEach(ele => {
          let x = ele.payload.toJSON();
          x["$key"] = ele.key;
          this.itemList.push(x);
        })

        this.itemList.sort((a, b) => {
          return a.isChecked - b.isChecked;
        })
      })
  }

  onAdd(itemTitle){
    this.todoService.addTitle(itemTitle.value);
    itemTitle.value = null;
  }

  alterCheck($key:string, isChecked){
    this.todoService.checkOrUnCheckTitle($key, !isChecked);
  }

  onDelete($key:string){
    this.todoService.removeTitle($key);
  }
}

Finally, build it

// Build in prod mode
ng build --prod

Copy the dist folder and deploy it.

https://github.com/sibaspage/todo-app

References

  1. https://github.com/angular/angularfire2
  2. https://console.firebase.google.com/