Art Of Engineer: May 2023

In this tutorial, we will learn how to build a simple "To Do" application from scratch using Angular 15 and Firebase.

* We will first install all the pre requisites.

* Then we will start creating the angular project.

* We will see how to set up firebase project.

* Finally we will check how to integrate firebase with the Angular project.

Here is the video version of the tutorial:

Step 1: Install Visual Studio Code from below link:

https://code.visualstudio.com/download

Step 2: Install Node JS:

https://nodejs.org/en/download

Step 3: Open up command prompt and install Angular CLI (version 15) using below command.

npm install -g @angular/cli@15



Step 4: Create Agular project using below command:
ng new todoapp



* To run the project you can use below command:
ng serve --open



* It will open the project in default browser:


Step 5: Create Firebase project:
* Go to https://firebase.google.com/
* Click on "Go to console"



* Click on "Create a project".

* Give your desired project name and continue:
* Create Firestore Database:




* Start in test mode:


* Create a collection:



* Also add some documents to collection with Auto generated IDs.

Step 6: Integrate Firebase to the Angular project:
* Install Angular Fire using below command:
npm i @angular/fire


* Goto Firebase console and create and app:



* Copy the firebase configuration value to add it to our angular project:

* Modify the app.module.ts file in Angular to add Firebase configuration.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { SharedService } from './shared.service';

const firebaseConfig = {
  apiKey: "*****************",
  authDomain: "*****************",
  projectId: "*****************",
  storageBucket: "*****************",
  messagingSenderId: "*****************",
  appId: "*****************"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
  ],
  providers: [SharedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7 : Create service files to add methods to interact with Firebase:

* Modify the shared.service.ts file:
import { Injectable } from '@angular/core';

import { Firestore, collectionData, collection,addDoc,doc,deleteDoc } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {

  constructor(private fs: Firestore) { }

  getNotes(){
    let notesCollection = collection(this.fs, 'notes');
    return collectionData(notesCollection,{idField:'id'}); 
  }

  addNote(desc:string){
    let data = {description:desc};
    let notesCollection = collection(this.fs, 'notes');
    return addDoc(notesCollection,data);
  }

  deleteNote(id:string){
      let docRef = doc(this.fs,'notes/'+id);
     return deleteDoc(docRef);
  }
}


Step 7: Add HTML and Methods in App Component.
*modify the file app.component.html:
<h2>Todo App</h2>

<input #newNote > 
<button (click)="addNotes(newNote.value)"> Add Notes</button>

<h3 *ngFor="let note of notes">
    <b>* {{note.description}} </b>   
    <button (click)="deleteNotes(note.id)">Delete Note</button>      
</h3>

* Modify the file app.component.ts:
import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'todoapp';
  notes:any=[];
  constructor(private service:SharedService){}
  ngOnInit() {
    this.refreshNotes();
  }
  refreshNotes(){
    this.service.getNotes().subscribe((res)=>{
      this.notes=res;
    });
  }
  addNotes(newNotes:string){
    this.service.addNote(newNotes).then((res)=>{
      console.log(res);
      this.refreshNotes()
    });
  }
  deleteNotes(id:string){
    this.service.deleteNote(id).then((res)=>{
      console.log(res);
      this.refreshNotes()
    });
  }
}



Todo app is now complete. Check it using ng serve --open command.