Angular 4 CRUD application with Firebase

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import { AppComponent } from './app.component';
import { jobServices } from './service/jobservice';
import { FormsModule,ReactiveFormsModule  }   from '@angular/forms';


export const firebaseConfig ={
       apiKey: "Use you apikey",
    authDomain: "Use your authDomain",
    databaseURL: "Use your database url",
     projectId: "joblisting-a9553",
   storageBucket: "joblisting-a9553.appspot.com",
    messagingSenderId: "202764714490"
}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule ,
    AngularFireModule.initializeApp(firebaseConfig),
    ],
  providers: [
    AngularFireDatabase,jobServices
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component,OnInit } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { jobServices } from './service/jobservice';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],


})
export class AppComponent {

 appState:string;
  activeKey:string;
   jobs: any[];
  
    updatedCategory:string;
    updatedCompany:string;
    updatedName:string  
    updatedEmail:string;
    updatedAddress:string;
    updatedPhone:string;
    updatedCity:string;
    updatedZipcode:string;
  constructor(private firebaservice: jobServices) { 
  }
  ngOnInit(){
   
    this.firebaservice.getJobs().subscribe(jobs =>{
      this.jobs = jobs;
        })
     this.appState = 'default';
  }
  changeState(state,key=null){
    this.appState = state;
    this.activeKey = key;
   
  }
  addJob(value:any){
      //console.log(value)
       this.firebaservice.addnewJobs(value)
        this.changeState('default');
  }
  edit(job){
    console.log(job)
    this.changeState('edit',job.$key);
    this.updatedCategory =job.category;
    this.updatedCompany = job.company;
    this.updatedName = job.name;
    this.updatedEmail =job.email;
    this.updatedAddress = job.address;
    this.updatedPhone = job.phone;
    this.updatedCity = job.city;
    this.updatedZipcode = job.zipcode;
  }
    updateJobs(){
         var updateJobs = {
        category:this.updatedCategory,
        company:this.updatedCompany,
        name:this.updatedName,
        email:this.updatedEmail,
        address:this.updatedAddress,
        phone:this.updatedPhone,
        city:this.updatedCity,
        zipcode:this.updatedZipcode
    }
    console.log(updateJobs)
    this.firebaservice.uptodateJob(this.activeKey,updateJobs);
    this.changeState('default');
  }
 deleteJob(key){
   this.firebaservice.removeJob(key)
 }
}

job.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@Injectable()
export class jobServices{
      jobs: FirebaseListObservable<any[]>;
     constructor(private db: AngularFireDatabase){
           this.jobs = this.db.list('/jobs') as FirebaseListObservable<any[]>;
      }
      getJobs(){
          return this.jobs;
     }
      addnewJobs(value){
          this.jobs.push(value)
      }
      uptodateJob(key,updateJob){
          return this.jobs.update(key,updateJob)
      }
      removeJob(key){
          this.jobs.remove(key)
      }
   
}

html file

<div class="container-fluid">
  <div class="col-md-12">&nbsp;</div>
   
  <div *ngIf="appState == 'edit'">
    <form (submit)="updateJobs()">
     <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Category</label>
    <input [(ngModel)]="updatedCategory" name="updatedCategory" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Company</label>
    <input [(ngModel)]="updatedCompany" name="updatedCompany" type="text" class="form-control">
  
  </div>
 </div>
  </div> 
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Name</label>
    <input [(ngModel)]="updatedName" name="updatedName" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Email</label>
    <input [(ngModel)]="updatedEmail" name="updatedEmail" type="email" class="form-control">
  
  </div>
 </div>
  </div> 
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Address</label>
    <input [(ngModel)]="updatedAddress" name="updatedAddress" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Phone</label>
    <input [(ngModel)]="updatedPhone" name="updatedPhone" type="text" class="form-control">
  
  </div>
 </div>
  </div>
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >City</label>
    <input  [(ngModel)]="updatedCity" name="updatedCity" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Zipcode</label>
    <input [(ngModel)]="updatedZipcode" name="updatedZipcode" type="text" class="form-control">
  
  </div>
 </div>
  </div>
  <div class="row"><div class="col-md-12">
  <button type="submit" class="btn btn-primary">Update Job</button>
  </div> </div>
    </form>
  </div>
  <div *ngIf="appState == 'add'">
    <form novalidate #usreForm="ngForm" (ngSubmit)="addJob(usreForm.value)">
     <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Category</label>
    <input [(ngModel)]="category" name="category" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Company</label>
    <input [(ngModel)]="company" name="company" type="text" class="form-control">
  
  </div>
 </div>
  </div> 
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Name</label>
    <input [(ngModel)]="name" name="name" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Email</label>
    <input [(ngModel)]="email" name="email" type="email" class="form-control">
  
  </div>
 </div>
  </div> 
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >Address</label>
    <input [(ngModel)]="address" name="address" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Phone</label>
    <input [(ngModel)]="phone" name="phone" type="text" class="form-control">
  
  </div>
 </div>
  </div>
   <div class="row">
    <div class="col-md-6">
      <div class="form-group">
    <label >City</label>
    <input  [(ngModel)]="city" name="city" type="text" class="form-control">
  
  </div>
    </div>
 <div class="col-md-6">
     <div class="form-group">
    <label >Zipcode</label>
    <input [(ngModel)]="zipcode" name="zipcode" type="text" class="form-control">
  
  </div>
 </div>
  </div>
  <div class="row"><div class="col-md-12">
  <button type="submit" class="btn btn-primary">Add Job</button>
  </div></div>
    </form>
  </div>
<div *ngIf="appState == 'extend'">
 
     <button type="button" (click)="changeState('default')" class="btn btn-primary">Back</button>
 
  <div *ngFor="let job of jobs">
    <div *ngIf="job.$key == activeKey">
            <table class="table table-hover">
  <thead>
    <tr>
     <th>Name</th>
      <th>Category</th>
      <th>Company</th>
       <th>Email</th>
      <th>Address</th>
      <th>Phone</th>
       <th>City</th>
        <th>Zipcode</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     
      <td>  {{job.name}}</td>
      <td>  {{job.category}}</td>
      <td>{{job.company}}</td>
        <td>  {{job.email}}</td>
      <td>  {{job.address}}</td>
      <td>{{job.phone}}</td>
        <td>  {{job.city}}</td>
      <td>  {{job.zipcode}}</td>
     
    </tr>
    
  </tbody>
</table>
       </div>
  </div>
</div>


<table *ngIf="jobs" class="table table-hover">
   <thead>
            <tr>
              <th>Company</th>
              <th>Category</th>
              <th>Phone</th>
              <th></th>  
            </tr>  
          </thead>
        <tbody  *ngIf="jobs?.length != 0; else elseBlock">
   
  
       <tr *ngFor="let job of jobs">
     
      <td >  {{job.company}}</td>
      <td>  {{job.category}}</td>
      <td>{{job.name}}</td>
        <td>
          <button type="button" (click)="changeState('extend',job.$key)" class="btn btn-primary">More</button>
<button type="button" class="btn btn-primary" (click)="edit(job)">Edit </button>
<button type="button" class="btn btn-primary" (click)="deleteJob(job.$key)">Delete</button>

        </td>
    </tr>
 
          
  
  </tbody>
   <ng-template #elseBlock>
    No data found
</ng-template>
    
</table>
 <div *ngIf="appState == 'default'">
      <button type="button" (click)="changeState('add')" class="btn btn-primary">Add Job</button>
  </div>

Demo Link

Leave a Reply

Your email address will not be published. Required fields are marked *