Angular 4 Firebase: To Do Angular App With Firebase

0

Hello Techies,

After knowing the basics of Angular 4, it’s worth taking an overview on simple to do Angular 4 App With Firebase. This article will show you steps to create a simple CRUD App with Angular 4 Firebase.

So, let’s begin with amazing few steps tutorial will show you how we can communicate with Firebase APIs in Angular 4.

Getting Started with Angular 4 Firebase

Before starting what’s insight, this Angular 4 Firebase article will make you able to work with Angular 4 services, reactive forms, and interactions with firebase real-time database.

Firstly, let’s see what App Component has

There are mainly three things to know about.

  • imports – This section will have list of necessary imports for modules, services which we are going to use in this App Component.
  • component – This section will have traditional selector, template, and style sources
  • class – This section will have mainly class members and it’s methods.

Moreover, let me try to elaborate more inside the code.

  • On init, we’ve defined the FormGroup, FormControl which are the part of reactive forms. As we’re working with reactive forms, it should be ready before the component gets initialized.
  • On add, we’ve used subscribe Observable while saving the data into database. This is one of the important aspects of Angular 4.
  • On retrieve, also here, we’ve used subscribe Observable with parsing the data into JSON. This way we can convert or manipulate APIs response to match with our defined compatibility.
  • Finally, on remove, we’re removing the data on client side first, and then saving the whole object in Firebase.

App Component Filepath: app.component.ts

//Import from core
import { Component, OnInit } from '@angular/core';
//Import form modules
import { FormGroup, FormControl, Validators} from '@angular/forms';
//Import observables
import { Observable, Subscriber } from 'rxjs';
import 'rxjs/Rx';
//Import db service
import { DbOperationsService } from './dboperations.service';
//Import necessary from HTTP
import { Http, Response, Headers } from '@angular/http';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
title = 'Angular 4 Firebase: Simple To Do Angular 4 App With Firebase';
todoForm: FormGroup;
todoList: any[] = [];
hightlightStatus: Array = [];

constructor(private dbOperations: DbOperationsService){}

//Function will call at the time of initilization
ngOnInit(){
this.todoForm = new FormGroup({
'todoTitle': new FormControl(null, Validators.required)
});
this.loadList();
}
//Function will call form submitted
addToDo(){
this.todoList.push(this.todoForm.get('todoTitle').value);
this.dbOperations.saveToDb(this.todoList).subscribe(
resposne => { console.log('added');}
);
this.todoForm.reset();
}
//Getting data from database using Observable
loadList() {
this.dbOperations.getDb()
.subscribe(
(response: Response) => {
const data = response.json();
this.todoList = data;
} ,
(error) => {console.log(error);}
);
};
//Removing data from db
removeToDo(index){
this.todoList.splice(index, 1);
this.dbOperations.saveToDb(this.todoList).subscribe(
resposne => { console.log('deleted');}
);
}
}

Secondly, let’s define Html using Angular 4 Reactive Form

Template Filepath: app.component.html

Here, you can see the usage of FormsGroup and FormControls which we’ve defined in App Component.

<div style="text-align: center;">
  <h1>
    //Here will have dynamic title, Angular 4 Firebase: Simple To Do Angular 4 App With Firebase
    {{title}}!
  </h1>
</div>
<div class="clearboth"></div>
<div class="container">    
  <form [formGroup]="todoForm" (ngSubmit)='addToDo()'>
    <div class="row">
      <div class="col-md-11">
        <div class="form-group">
          <input type="text" name="" class="form-control" formControlName="todoTitle" placeholder="Title">
          <span class="help-block" *ngIf="!todoForm.get('todoTitle').valid && todoForm.get('todoTitle').touched">
            Please enter title
          </span>
        </div>
      </div>
      <div class="col-md-1">
        <div class="pull-right">
          <button type="submit" class="btn btn-primary" [disabled]="!todoForm.valid">Add</button>
        </div>
      </div>
    </div>
    <div class="row">
    <div class="col-md-6">
      <ul class="list-group" *ngIf="todoList?.length; else noToDoList">
        <li class="list-group-item" 
          *ngFor="let item of todoList; let i = index;" 
          (click)="hightlightStatus[i]=!hightlightStatus[i]" 
          [class.checked]="hightlightStatus[i]">
          {{item}}
          <a href="#" style="float: right;" (click)="removeToDo(i)"><i class="fa fa-times" aria-hidden="true"></i></a>
        </li>
      </ul> 
      <ng-template #noToDoList>No list found</ng-template>
    </div>
  </div>
  </form>
</div>   

Actually, there are two types of form usage available in Angular 4, one is traditional template driven and another is a reactive form which we’ve used here. I’ve chosen reactive form method because it gives me a simple and easy way to create my Angular 4 forms. Even, it’s providing validators that are also an interesting part of reactive forms for applying validations at the time of initializing the forms.

Reactive form approach for Angular 4 explained here, Take me deeper into Angular 4 Reactive Forms

Thirdly, let’s dig into Angular 4 service

Service, basically enables you to reuse your code and create a standard structure of your Angular 4 app. Here, we’re using two HTTP methods to save and retrieve the data from firebase.

  • Put, that will just save the data object in firebase.
  • Get, that will retrieve the data from firebase.

Service Filepath: dboperations.service.ts

//Import Injectable
import { Injectable } from '@angular/core';
//Import HTTP, Response and Headers
import { Http, Response, Headers } from '@angular/http';
//Import Obserables
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class DbOperationsService{
constructor(private http: Http){}

saveToDb(toDoList: any[]){
return this.http.put('https://ng-todo-d052e.firebaseio.com/list.json', toDoList);
}

getDb() {
const headers = new Headers();
headers.append('Access-Control-Allow-Origin', '*');
return this.http.get('https://ng-todo-d052e.firebaseio.com/list.json', {headers: headers});
}
}

Finally, let’s see what App Module contains

Here, we’ve necessary things must be imported to bootstrap our Angular 4 app successfully.

Important note, don’t forget to import and provide the service as shown below.

App Module Filepath: app.module.ts

//Import Browser module
import { BrowserModule } from '@angular/platform-browser';
//Import NgModule
import { NgModule } from '@angular/core';
//Import Reactive Forms Module
import { ReactiveFormsModule } from '@angular/forms';
//Import Http Module
import { HttpModule } from '@angular/http';
//Import App Component
import { AppComponent } from './app.component';
//Import db service
import { DbOperationsService } from './dboperations.service';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
HttpModule
],
providers: [DbOperationsService],
bootstrap: [AppComponent]
})
export class AppModule { }

Now, you’re ready to rock with Angular 4 Firebase App. Just go to the directory where you’ve this project.

cd Angular4-firebase-todo

And hit..
ng serve

This is it, open your browser on, http://localhost:4200

At the end, to get example here, Get me to the code

I’m sure now you’re ready to rock with amazing AngularJs 4 Firebase app, using Reactive Forms and Angular 4 service. If you’ve any questions/suggestions, feel free to hit the comments.

Happy coding!

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of