www.sexvibe.video

Angular 4 Firebase: To Do Angular App With Firebase

1

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

[js]
//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’);}
);
}
}
[/js]

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.
[js]

//Here will have dynamic title, Angular 4 Firebase: Simple To Do Angular 4 App With Firebase
{{title}}!



Please enter title

  • {{item}}

No list found

[/js]

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

[js]
//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});
}
}
[/js]

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

[js]
//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 { }
[/js]

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

[js]
cd Angular4-firebase-todo
[/js]
And hit..
[js]
ng serve
[/js]
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!

0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Technology Points
3 years ago

Nice post about Firebase with a proper guide. Best information! Thanks for sharing the wonderful article.

classy ebony stepdaughter screwed sensually.kirmiziyilan.com

1
0
Would love your thoughts, please comment.x
()
x