In this article, we create Components to store, get, update, delete data in Firebase. In the last article, we saw how to set up the firebase account and database setup. Then we have created a service that is communicated with firebase and angular.
Demo User Add/Edit/Delete Firebase
4) Generate Angular Components for Adding, Updating & Creating Users Data
//add user
ng generate component add-user
//edit user
ng generate component edit-user
//user listing
ng generate component user-list
5)After generating the component we need to set up in the routing to the component. Display in the below code.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Use RouterModule, Routes for activating routing in angular
import { RouterModule, Routes } from '@angular/router';
// components
import { AddUserComponent } from './add-user/add-user.component';
import { UserListComponent } from './user-list/user-list.component';
import { EditUserComponent } from './edit-user/edit-user.component';
// Routes array define component along with the path name for url
const routes: Routes = [
{ path: '', redirectTo: '/register-user', pathMatch: 'full' },
{ path: 'register-user', component: AddUserComponent },
{ path: 'view-user', component: UserListComponent },
{ path: 'edit-user/:id', component: EditUserComponent }
];
// Import RouterModule
@NgModule({
imports: [CommonModule,RouterModule.forRoot(routes)],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
After adding the Router configration we need to active router service and layout in the “app.component.html” file. display in the below code.
<!-- Top navigation -->
<nav class="navbar navbar-default fixed-top bg-default flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" routerLink="/register-user">
<span class="dasboard-text">Dashboard</span>
</a>
</nav>
<!-- Sidebar navigation -->
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" routerLink="/register-user" routerLinkActive="active">
<i class="fas fa-plus"></i>Add User
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/view-user" routerLinkActive="active">
<i class="fas fa-list-ul"></i>Users List
</a>
</li>
</ul>
</div>
</nav>
<!-- Main content -->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="inner-adjust">
<router-outlet></router-outlet>
<!-- Footer -->
<footer>
</footer>
</div>
</main>
</div>
</div>
6) Display the notification for alert notification for success and error we use NGX-Toastr module. Installing module using the below command.
//instal module
npm install ngx-toastr --save
//dependency
npm install @angular/animations --save
after install we need to importa in the app.module file and also import css in our angular.json for style.
//angular.json file.
"styles": [
..............
"node_modules/ngx-toastr/toastr.css" // ngx-toastr's css
]
//app.moudule.ts
........
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
................
imports: [
.........
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot() // ToastrModule added
..........
]
})
Now we can use these in our component. How to use in our component “ngx-toastr” display in the below code.
//need to import ngx toaster service
import { ToastrService } from 'ngx-toastr';
export class exampleComponent {
constructor(private toastr: ToastrService) {}
successNotification() {
this.toastr.success('Successfully user added.');
}
To know more about API and option for the ngx-toaster Click here to their main documentation
7) Let’s create a user form using Reactive Form and store that data in firebase in our add-user component.
Let’s open “add-user.component.ts” we need to import the firebase service, reactive form modules.
import { CrudService } from '../shared/crud.service'; // CRUD services API
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; // Reactive form services
import { ToastrService } from 'ngx-toastr'; // Alert message
Display below the full code for the add user form in firebase. we create “add-user.component.ts” we need to add the formbuilder for the form set data. display the form in “add-user.component.html” file display in the below code.
“add-user.component.ts” File
import { Component, OnInit } from '@angular/core';
import { CrudService } from '../shared/crud.service'; // CRUD services API
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; // Reactive form services
import { ToastrService } from 'ngx-toastr'; // Alert message using NGX toastr
@Component({
selector: 'app-add-user',
templateUrl: './add-user.component.html',
styleUrls: ['./add-user.component.css']
})
export class AddUserComponent implements OnInit {
public userForm: FormGroup; // Define FormGroup to user form
constructor(
public crudApi: CrudService, // CRUD API services
public fb: FormBuilder, // Form Builder service for Reactive forms
public toastr: ToastrService // Toastr service for alert message
) { }
ngOnInit() {
this.crudApi.GetUsersList(); // Call GetStudentsList() before main form is being called
this.usForm(); // Call User form when component is ready
}
// Reactive student form
usForm() {
this.userForm= this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(2)]],
lastName: [''],
email: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')]],
mobileNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
})
}
// Accessing form control using getters
get firstName() {
return this.userForm.get('firstName');
}
get lastName() {
return this.userForm.get('lastName');
}
get email() {
return this.userForm.get('email');
}
get mobileNumber() {
return this.userForm.get('mobileNumber');
}
// Reset user form's values
ResetForm() {
this.userForm.reset();
}
submitUSerData() {
this.crudApi.AddUser(this.userForm.value); // Submit user data using CRUD API
this.toastr.success(this.userForm.controls['firstName'].value + ' successfully added!');
this.ResetForm(); // Reset form
};
}
“add-user.component.html” File
<div class="pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Add User</h1>
<p class="custom-text">CRUD app for <strong>user record management system</strong></p>
</div>
<!-- USer form -->
<form [formGroup]="userForm" (ngSubmit)="submitUSerData()" novalidate>
<div class="row">
<div class="col-lg-5 col-md-12 col-sm-12">
<div class="row">
<div class="col-md-12 mb-3">
<label>First name</label>
<input type="text" formControlName="firstName" class="form-control" required>
<!-- Showing errors using getter method -->
<p *ngIf="firstName.touched && firstName.invalid" class="error"><sup>*</sup>Please enter atleast first name</p>
<p *ngIf="firstName.errors?.minlength" class="error"><sup>*</sup>Name shouldn't be less than 2 words</p>
</div>
<div class="col-md-12 mb-3">
<label>Last name</label>
<input type="text" formControlName="lastName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label>Email</label>
<input type="email" formControlName="email" class="form-control" required>
<!-- Showing errors using getter method -->
<p *ngIf="email.touched && email.invalid" class="error"><sup>*</sup>Please provide email</p>
<p *ngIf="email.errors?.pattern" class="error"><sup>*</sup>Please enter correct email</p>
</div>
<div class="col-md-12 mb-3">
<label>Mobile number</label>
<input type="text" formControlName="mobileNumber" class="form-control" required>
<!-- Showing errors using getter method -->
<p *ngIf="mobileNumber.touched && mobileNumber.invalid" class="error"><sup>*</sup>Please provide contact
number</p>
<p *ngIf="mobileNumber.errors?.pattern" class="error"><sup>*</sup>Use numbers only
number</p>
</div>
</div>
<div class="form-group text-right">
<button type="button" class="btn btn-secondary gap-right" (click)="ResetForm()">Reset</button>
<button type="submit" class="btn btn-primary" [disabled]="!studentForm.valid">Add User</button>
</div>
</div>
</div>
</form><!-- USer form ends-->
No Responses