Angular with firebase

Today session is about how connect the angular with firebase

PREREQUISITES

1)Node.js                            - if you are not already installed click  Here
2)npm package manager    -
3)text editor(vs code)         - if you are not already installed click Here  

if you are already install the node.js you can silmply open the command prompt and type
node -v then you will see the follow result.

• Install angular cli 

               open your command prompt and type as follow

• create a new angular project

            type your command prompt as follow for start the new angular project.

• open the angular project

             first you should move to inside the folder 

             then start the project 

• add firebase for the project

• make a firebase porject

           visit for the firebase and stasrt a project as follow

i already made a project. then i not going to make another project

after after that click the project then you can see as follow interface. select the web option.

copy the marked area. and open your angular project and find the environment.ts and copy it as follows

you can make a variable as this

firebaseCOnfig : {
    apiKey: "AIzaSyDrXBzelhkbnLiepTDdWT1ct6-4UTr9xSQ",
    authDomain: "firestorecrud-cdd76.firebaseapp.com",
    databaseURL: "https://firestorecrud-cdd76.firebaseio.com",
    projectId: "firestorecrud-cdd76",
    storageBucket: "firestorecrud-cdd76.appspot.com",
    messagingSenderId: "715888619999"
  }

• src/app/app.module.ts (add firebase)

add following imports for the app.module.ts

1. import { AngularFireModule } from '@angular/fire';
2. import { AngularFirestoreModule } from '@angular/fire/firestore';
3. import { environment } from 'src/environments/environment';

and add the following modules for the imports section

1. AngularFirestoreModule,
2. AngularFireModule.initializeApp(environment.firebaseConfig),

make a component named employee as follows.

make a service for the employee

make a class for the employee

• src/app/employee/employee.model.ts

make a class as follow

1. export class Employee {
2.     id: string;
3.     fullName: string;
4.     position: string;
5. }

• src/app/employee/employee.service.ts

make a variable named formData as follows

1. import { Injectable } from '@angular/core';
2. import { Employee } from './employee.model';
4. @Injectable({
5.    providedIn: 'root'
6. })
7. export class EmployeeService {
8.    formData :Employee;
9.    constructor() { }
10. }

• src/app/app.module.ts and add EmployeeService for the providers

1. import { BrowserModule } from '@angular/platform-browser';
2. import { NgModule } from '@angular/core';
3. import { AppRoutingModule } from './app-routing.module';
4. import { AppComponent } from './app.component';
6. //firebase
7. import { AngularFireModule } from '@angular/fire';
8. import { AngularFirestoreModule } from '@angular/fire/firestore';
9. import { environment } from 'src/environments/environment';
10. import { EmployeeComponent } from './employee/employee.component';
11. import { EmployeeService } from './employee/employee.service';
12. import { FormsModule } from '@angular/forms'
14. @NgModule({
16. declarations: [
17.     AppComponent,
18.     EmployeeComponent
19. ],
20. imports: [
21.     BrowserModule,
22.     AppRoutingModule,
23.     AngularFirestoreModule,
24.     AngularFireModule.initializeApp(environment.firebaseConfig),
25.     FormsModule
26. ],
27. providers: [EmployeeService],
28. bootstrap: [AppComponent]
29. })
30. export class AppModule { }

• src/app/employee/employee.component.ts

add EmployeeService and AngularFirestore into the inside of the constructor of this as follows

constructor(private service : EmployeeService, private firestore:AngularFirestore) { }

and import the follow things

1. import { EmployeeService } from './employee.service';
2. import { AngularFirestore } from '@angular/fire/firestore';

• src/app/employee/employee.component.html 

add follow code for the make the html page

1. <h1 class="display">EMP register</h1>
2. <form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)">
3.   <div class="form-group">
4.     <input name="fullName" #fullName="ngModel" [(ngModel)]="service.formData.fullName" class="form-control">
5.   </div>
6.   <div class="form-group">
7.     <input name="position" #position="ngModel" [(ngModel)]="service.formData.position" class="form-control">
8.   </div>
9.   <div class="form-group">
10.     <button type="submit" class="btn btn-lg btn-block btn-info">submit</button>
11.   </div>
12. </form>

• src/app/employee/employee.component.ts

add the following function for the component file

1. onSubmit(form: NgForm){
2.     let data = form.value;
3.     this.firestore.collection('comployee').add(data);
4.     this.resetForm(form);
5. }

according to the above function firebase database will make a collection named 'employee' and add the user inputs

finally employee.component.ts should be as follow

1. import { Component, OnInit } from '@angular/core';
2. import { NgForm } from '@angular/forms';
3. import { EmployeeService } from './employee.service';
4. import { AngularFirestore } from '@angular/fire/firestore';
6. @Component({
7.     selector: 'app-employee',
8.     templateUrl: './employee.component.html',
9.     styleUrls: ['./employee.component.css']
10. })
11. export class EmployeeComponent implements OnInit {
12.     constructor(private service : EmployeeService, private firestore:AngularFirestore) { }
13.     ngOnInit() {
15.     }
16.     onSubmit(form: NgForm){
17.         let data = form.value;
18.         this.firestore.collection('complyee').add(data);
19.     }
20. }

• app.component.html 

copy and paste this

1. <div>
2.   </app-employee>
3. </div>

  

this use for the invoke the employee.html file

• app.module.ts 

should import the Employee component

1. declarations: [
2.     AppComponent,
3.     EmployeeComponent
4. ],

if you want to more details about this project,
you can visit my github profile and angular-firebase-simple-exameple