Linking Angular Project with Fire base

Linking Angular Project with Fire base


1. Fire base Installation
2. Fire base configuration
3. Fire base setup with Angular Project.

1. Fire base Installation

Use the following command to install fire base

 
Command: npm install angularfire2 firebase --save

2. Fire base Configuration


a. Go to following link and login with your Gmail Credentials 



Link: https://console.firebase.google.com/








b. Click on Add Project link. 



c. Enter Your Project Name in the field 



d. Select and agree terms and conditions



e. Click on Create Project Button



f. After successful creation of project click on Continue button



g. Home page appear's



h. From side navigation bar Click on Database option



i. You can create a cloud database or Real Time Database (In this we are selecting Real Time database).



j. Scroll a little bit and you will see a Create Database button. Click on Create Database.



K. A popup appear's. Select "START IN TEST MODE" and Click on enable button.



l.Data base page appear's with Data tab selected. Where you can see the Project name as database table name.



m. Now Your data base is ready with default or Empty Data

3. Fire base Setup with Angular Project




a. Go to home page of project.
b. From side navigation click on Authentication Tab.



c. On the Top Right Click on Web setup button.



d. API key's and configuration data is visible as follow's 








       var config = { 



              apiKey: "xxxxxxxxxxxxxxxxx", 



              authDomain: "xxxxxxxxxxxx", 



              databaseURL: "xxxxxxxxxxxxxxxxxx", 



              projectId: "xxxxxxxxxxxxxx", 



              storageBucket: "", 



              messagingSenderId: "xxxxxxxxxxxx" 



        };



e. Copy the configuration key's or Object and make a note some where.

4. Changes need in our project are as follow's





a. Open Project in your favorite editor.
b. Now Open app.module.ts file of your project import following module's




    

  1. import { AngularFireModule } from 'angularfire2'; 
    2. 

  2. import { AngularFireDatabaseModule } from 'angularfire2/database'; 
    3. 

  3. import { AngularFireAuthModule } from 'angularfire2/auth';
    4. 




c. Just below the imports section paste your fire base configuration keys or Object 












       var config = { 



              apiKey: "xxxxxxxxxxxxxxxxx", 



              authDomain: "xxxxxxxxxxxx", 



              databaseURL: "xxxxxxxxxxxxxxxxxx", 



              projectId: "xxxxxxxxxxxxxx", 



              storageBucket: "", 



              messagingSenderId: "xxxxxxxxxxxx" 



        };










d. In import's section of @ngModule do the following 








             imports : [ 



                      AngularFireModule.initializeApp(config), 



                      AngularFireDatabaseModule, 
                      AngularFireAuthModule 



                  ];



e. Now all the module's are imported and can be used in any component's.



f. Done with fire base 

Comments

Post a Comment

Popular posts from this blog

Installation and Setup Fire Base with Angular

Fire base with Angular Software's Required 1. Node (Latest Version) 2. Visual studio / Atom / Sublime Text 3. Angular 6 Setup and Installation 4.  Angular Project Creation and Running. 1. Downloading and installing Node 1. Visit following link and download node  Link:  https://nodejs.org/en/download/ 2. After download install by following the steps. 3. Once installed open command prompt and type following command to check node version command:  node -v  4. Note : Node version should be more that 6+ version. 2. Downloading and Installing Visual studio / Atom / Sublime Text 1. Visit following link for Visual Studio Code Link:  https://code.visualstudio.com/download 2. Visit following link for  Atom Link :  https://atom.io/ 3. Visit following link for Sublime Text Link:  https://www.sublimetext.com/3 4. After downloading follow the steps according to ...
Read more

Pushing Form Data Into Fire base

Pushing Form Data Into Fire base 1. Form Creation 2. Pushing Form Data into data base. 1. Form Creation in Angular 1. Create Form Component Command : ng generate component templateForms --spec=false         The above command generate's following file's  1. template-forms.component.html 2. template-forms.component.ts 3. template-forms.component.css  Create one more file in the same folder as model file  4. template-forms.model.ts Now in the model file do the following  export class LoginForm { emailVal: string; passwordVal: string; } Description 1. In this model we are using 2 form input's which we need to send as a request 2. In model we define name of model and type of model if we don't have default Values. In template-forms. component.ts do the following <form #loginForm="ngForm" (ngSubmit)="login(loginForm)"> Email <br> <i...
Read more

Updating an existing Object in Angular using firebase

Updating an existing Object in Angular using firebase 1. Creating a component. 2. Fetching the list of user and Updating a particular component based on the key or Username. 1. Creating a component ng g c list --spec=false The above command generates 3 file's as follow's  1. list.component.html 2. list.component.ts 3. list.component.css Here we will fetch the user's which we have already pushed into firebase in previous post. For reference please visit following link  https://angularfirebasedeveloper.blogspot.com/2018/10/pushing-form-data-into-fire-base.html . 2. Fetching the list of user and Updating a particular component based on the key or Username. In list.component.ts import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] ...
Read more