{"id":101940,"date":"2020-02-14T07:00:41","date_gmt":"2020-02-14T05:00:41","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=101940"},"modified":"2020-02-12T11:03:02","modified_gmt":"2020-02-12T09:03:02","slug":"basic-firebase-crud-operations-in-angular","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html","title":{"rendered":"Basic Firebase CRUD Operations in Angular"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will perform the <span style=\"text-decoration: underline\"><strong>CRUD Operations in Firebase<\/strong><\/span> through an angular application.<\/p>\n<h2>1. Introduction<\/h2>\n<ul>\n<li><strong>Angular<\/strong> is a Typescript-based open-source framework that helps developers build single-page applications<\/li>\n<li>Offers Object-oriented features and supports the dynamic loading of the pages<\/li>\n<li>Supports Two-way data binding, Property (<code>[]<\/code>), and Event (<code>()<\/code>) binding techniques<\/li>\n<li>Supports command-line-interface to easily initiate and manage the angular projects from the command line<\/li>\n<\/ul>\n<h3>1.1 What is Firebase?<\/h3>\n<ul>\n<li>It is a Backend-As-A-Service that helps developers to write high-quality applications<\/li>\n<li>If offers: Authentication, Database, Hosting, Real-time data synchronization, and automatic update notifications<\/li>\n<li>And many more. . . . .<\/li>\n<\/ul>\n<p>Now open the visual studio code and let us see how to implement this tutorial in the angular framework.<\/p>\n<h2>2. Basic Firebase CRUD Operations in Angular<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3>2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code and Node Terminal to compile and execute the angular code on a browser.<\/p>\n<h3>2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"416\" height=\"818\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-project-structure-img1.jpg\" alt=\"CRUD Operations in Angular - Application Structure\" class=\"wp-image-101941\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-project-structure-img1.jpg 416w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-project-structure-img1-153x300.jpg 153w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating a Firebase Project<\/h2>\n<p>Developers can refer this <a href=\"https:\/\/www.javacodegeeks.com\/firebase-authentication-with-angular.html\" target=\"_blank\" rel=\"noopener noreferrer\">link<\/a> till Fig. 4 to set-up the firebase project. Once the project is set-up they need to navigate to the Database tab (i.e. <code>Project Overview -&gt; Develop -&gt; Database<\/code>). Create a new Firestore database (<em>Cloud-Firestore<\/em>) and select the test mode for practice purposes.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"818\" height=\"142\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-firebase-db-img1.jpg\" alt=\"CRUD Operations in Angular - Firestore Database\" class=\"wp-image-101942\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-firebase-db-img1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-firebase-db-img1-300x52.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-firebase-db-img1-768x133.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 2: Firestore Database<\/figcaption><\/figure>\n<\/div>\n<h2>4. Creating an Angular Application<\/h2>\n<p>Run the <code>ng new angular-firebase-crud-example<\/code> command in the npm console to create a new angular project. Once the new project is created, execute the following commands in the npm console to install and save <em>angular-firebase<\/em> dependency required for this example.<\/p>\n<div>\n<div id=\"highlighter_692072\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">npm install firebase @angular\/fire --save<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>4.1 Adding Firebase Configuration to Environment File<\/h3>\n<p>Let us add the Firebase configuration information to the application\u2019s <code>src\/environments\/environment.ts<\/code> file. In this file, we\u2019ll specify the Firebase API and the project credentials to the environment variable.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>environment.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_449295\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">export<\/code> <code class=\"js plain\">const environment = {<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">production: <\/code><code class=\"js keyword\">false<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">firebaseConfig: {<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">apiKey: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">authDomain: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">databaseURL: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">projectId: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">storageBucket: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">messagingSenderId: <\/code><code class=\"js string\">\"\"<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">appId: <\/code><code class=\"js string\">\"\"<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"js plain\">};<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>Note:<\/strong> Developers can find these values in the firebase console if developers click on Add Firebase to the web app icon.<\/p>\n<h3>4.2 Injecting Angular Firebase Module<\/h3>\n<p>Import and inject the Angular Firebase module in the <code>src\/app\/app.module.ts<\/code> file. In this file, we\u2019ll also import the application\u2019s environment file. Add the following code to the file.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.module.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_425078\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js comments\">\/\/ Configure firebase.<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AngularFireModule } from <\/code><code class=\"js string\">'@angular\/fire'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AngularFirestoreModule } from <\/code><code class=\"js string\">'@angular\/fire\/firestore'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\">&nbsp;<\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"js comments\">\/\/ Importing the environment config file for the firebase configuration.<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ environment } from <\/code><code class=\"js string\">'src\/environments\/environment'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number7 index6 alt2\">&nbsp;<\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js plain\">\u2026<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"js spaces\">&nbsp;<\/code><code class=\"js plain\">imports: [<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">BrowserModule,<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">AngularFireModule.initializeApp(environment.firebaseConfig),<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">AngularFirestoreModule,<\/code><\/div>\n<div class=\"line number13 index12 alt2\">&nbsp;<\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js plain\">\u2026<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>4.3 Creating a Student Model<\/h3>\n<p>Let us create a Student model class to map the attributes of a student. We will create the model class by using the following Angular CLI command i.e. <code>ng generate model shared\/student<\/code>.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>student.model.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_29151\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">Student {<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">id: string;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">fullName: string;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">rollNo: string;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">branchName: string;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">guardianPhoneNo: string;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>4.4 Creating Student Service<\/h3>\n<p>Let us create a Student service that interacts with the <em>Angular Firestore<\/em> to fetch the information of all students. We will create the service class by using the following Angular CLI command i.e. <code>ng generate service shared\/student<\/code>.<\/p>\n<p><strong>Note<\/strong>: The above command will automatically create an entry for this file in the <code>app.module.ts<\/code>.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>student.service.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_991070\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Injectable } from <\/code><code class=\"js string\">'@angular\/core'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number2 index1 alt1\">&nbsp;<\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Student } from <\/code><code class=\"js string\">'..\/shared\/student.model'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AngularFirestore } from <\/code><code class=\"js string\">'@angular\/fire\/firestore'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number5 index4 alt2\">&nbsp;<\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js plain\">@Injectable({<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">providedIn: <\/code><code class=\"js string\">'root'<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number9 index8 alt2\">&nbsp;<\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">StudentService {<\/code><\/div>\n<div class=\"line number11 index10 alt2\">&nbsp;<\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">constructor(<\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">fireStore: AngularFirestore) { }<\/code><\/div>\n<div class=\"line number13 index12 alt2\">&nbsp;<\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Student form data.<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">formData: Student;<\/code><\/div>\n<div class=\"line number16 index15 alt1\">&nbsp;<\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Fetch all students information.<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">getAllStudents() {<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ valueChanges() function returns the observable containing the student details expect the id of the document.<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ snapshotChanges() function returns the observable containing the student details and the id of the document (i.e. the metadata).<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">return<\/code> <code class=\"js keyword\">this<\/code><code class=\"js plain\">.fireStore.collection(<\/code><code class=\"js string\">'students'<\/code><code class=\"js plain\">).snapshotChanges();<\/code><\/div>\n<div class=\"line number22 index21 alt1\">&nbsp;<\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ We will use the id in order to perform the update or delete operation.<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"js plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>4.5 Creating Students Component<\/h3>\n<p>Students component is a central place to hold the <code>student<\/code> and <code>student-list<\/code> component. We can create the student\u2019s component by using the following Angular CLI command i.e. <code>ng generate component students<\/code>.<\/p>\n<p><strong>Note<\/strong>: The above command will automatically create an entry for this file in the <code>app.module.ts<\/code>.<\/p>\n<h4>4.5.1 Creating a Student Component<\/h4>\n<p>The <span style=\"text-decoration: underline;\">student component<\/span> maintains the CREATE and UPDATE operation for the students. We can create the student component by using the following Angular CLI command i.e. <code>ng generate component students\/student<\/code>.<\/p>\n<p><strong>Note<\/strong>: The above command will automatically create an entry for this file in the <code>app.module.ts<\/code>.<\/p>\n<h5>4.5.1.1 Student Form<\/h5>\n<p>Add the following code to the <code>student.component.html<\/code> file. Please remember to include the <code>FormsModule<\/code> in <code>app.module.ts<\/code> file as this component will contain an interactive form.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>student.component.html<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_431141\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<div class=\"line number27 index26 alt2\">27<\/div>\n<div class=\"line number28 index27 alt1\">28<\/div>\n<div class=\"line number29 index28 alt2\">29<\/div>\n<div class=\"line number30 index29 alt1\">30<\/div>\n<div class=\"line number31 index30 alt2\">31<\/div>\n<div class=\"line number32 index31 alt1\">32<\/div>\n<div class=\"line number33 index32 alt2\">33<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h1<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"display-5 text-center\"<\/code><code class=\"html plain\">&gt;Student Registration&lt;\/<\/code><code class=\"html keyword\">h1<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;&nbsp;&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\">&nbsp;<\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">form<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">form<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngForm\"<\/code> <code class=\"html color1\">autocomplete<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"off\"<\/code> <code class=\"html plain\">(submit)=\"onSubmit(form)\"&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">input<\/code> <code class=\"html color1\">type<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"hidden\"<\/code> <code class=\"html color1\">name<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"id\"<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">id<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngModel\"<\/code> <code class=\"html plain\">[(ngModel)]=\"service.formData.id\"&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-group\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">input<\/code> <code class=\"html color1\">name<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"fullName\"<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">fullName<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngModel\"<\/code> <code class=\"html plain\">[(ngModel)]=\"service.formData.fullName\" <\/code><code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-control\"<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html color1\">placeholder<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Full name\"<\/code> <code class=\"html plain\">required&gt;<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html plain\">*<\/code><code class=\"html color1\">ngIf<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"fullName.invalid &amp;&amp; fullName.touched\"<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"validation-error\"<\/code><code class=\"html plain\">&gt;Student name is required.&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-group\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">input<\/code> <code class=\"html color1\">name<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"branchName\"<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">branchName<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngModel\"<\/code> <code class=\"html plain\">[(ngModel)]=\"service.formData.branchName\" <\/code><code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-control\"<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html color1\">placeholder<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Branch name\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-row\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-group col-md-6\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">input<\/code> <code class=\"html color1\">name<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"rollNo\"<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">rollNo<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngModel\"<\/code> <code class=\"html plain\">[(ngModel)]=\"service.formData.rollNo\" <\/code><code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-control\"<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html color1\">placeholder<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Roll number\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-group&nbsp; col-md-6\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">input<\/code> <code class=\"html color1\">name<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"guardianPhoneNo\"<\/code> <code class=\"html plain\">#<\/code><code class=\"html color1\">guardianPhoneNo<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ngModel\"<\/code> <code class=\"html plain\">[(ngModel)]=\"service.formData.guardianPhoneNo\"<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-control\"<\/code> <code class=\"html color1\">placeholder<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Guardian phone number\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"form-group\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">button<\/code> <code class=\"html color1\">type<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"submit\"<\/code> <code class=\"html plain\">[disabled]=\"form.invalid\"<\/code><\/div>\n<div class=\"line number27 index26 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"btn btn-lg btn-block btn btn-outline-success\"<\/code><code class=\"html plain\">&gt;Submit&lt;\/<\/code><code class=\"html keyword\">button<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number28 index27 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number29 index28 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">form<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number30 index29 alt1\">&nbsp;<\/div>\n<div class=\"line number31 index30 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"error\"<\/code> <code class=\"html plain\">*<\/code><code class=\"html color1\">ngIf<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"message\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number32 index31 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h5<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"text-success\"<\/code><code class=\"html plain\">&gt;{{ message }}&lt;\/<\/code><code class=\"html keyword\">h5<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number33 index32 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h5>4.5.1.2 Student Component<\/h5>\n<p>Add the following code to the <code>student.component.ts<\/code> file to perform the CREATE and UPDATE operations in a Firebase database.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<p><span style=\"text-decoration: underline;\"><em>student.component.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_394786\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<div class=\"line number27 index26 alt2\">27<\/div>\n<div class=\"line number28 index27 alt1\">28<\/div>\n<div class=\"line number29 index28 alt2\">29<\/div>\n<div class=\"line number30 index29 alt1\">30<\/div>\n<div class=\"line number31 index30 alt2\">31<\/div>\n<div class=\"line number32 index31 alt1\">32<\/div>\n<div class=\"line number33 index32 alt2\">33<\/div>\n<div class=\"line number34 index33 alt1\">34<\/div>\n<div class=\"line number35 index34 alt2\">35<\/div>\n<div class=\"line number36 index35 alt1\">36<\/div>\n<div class=\"line number37 index36 alt2\">37<\/div>\n<div class=\"line number38 index37 alt1\">38<\/div>\n<div class=\"line number39 index38 alt2\">39<\/div>\n<div class=\"line number40 index39 alt1\">40<\/div>\n<div class=\"line number41 index40 alt2\">41<\/div>\n<div class=\"line number42 index41 alt1\">42<\/div>\n<div class=\"line number43 index42 alt2\">43<\/div>\n<div class=\"line number44 index43 alt1\">44<\/div>\n<div class=\"line number45 index44 alt2\">45<\/div>\n<div class=\"line number46 index45 alt1\">46<\/div>\n<div class=\"line number47 index46 alt2\">47<\/div>\n<div class=\"line number48 index47 alt1\">48<\/div>\n<div class=\"line number49 index48 alt2\">49<\/div>\n<div class=\"line number50 index49 alt1\">50<\/div>\n<div class=\"line number51 index50 alt2\">51<\/div>\n<div class=\"line number52 index51 alt1\">52<\/div>\n<div class=\"line number53 index52 alt2\">53<\/div>\n<div class=\"line number54 index53 alt1\">54<\/div>\n<div class=\"line number55 index54 alt2\">55<\/div>\n<div class=\"line number56 index55 alt1\">56<\/div>\n<div class=\"line number57 index56 alt2\">57<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Component, OnInit } from <\/code><code class=\"js string\">'@angular\/core'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ StudentService } from <\/code><code class=\"js string\">'src\/app\/shared\/student.service'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ NgForm } from <\/code><code class=\"js string\">'@angular\/forms'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AngularFirestore } from <\/code><code class=\"js string\">'@angular\/fire\/firestore'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number5 index4 alt2\">&nbsp;<\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js plain\">@Component({<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">selector: <\/code><code class=\"js string\">'app-student'<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">templateUrl: <\/code><code class=\"js string\">'.\/student.component.html'<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">styleUrls: [<\/code><code class=\"js string\">'.\/student.component.css'<\/code><code class=\"js plain\">]<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">StudentComponent <\/code><code class=\"js keyword\">implements<\/code> <code class=\"js plain\">OnInit {<\/code><\/div>\n<div class=\"line number12 index11 alt1\">&nbsp;<\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">message: string;<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">constructor(<\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">service: StudentService, <\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">fireStore: AngularFirestore) { }<\/code><\/div>\n<div class=\"line number15 index14 alt2\">&nbsp;<\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">ngOnInit() {<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.resetForm();<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number19 index18 alt2\">&nbsp;<\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">resetForm(form?: NgForm) {<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">if<\/code> <code class=\"js plain\">(form != <\/code><code class=\"js keyword\">null<\/code><code class=\"js plain\">) {<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">form.resetForm();<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.service.formData = {<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">id: <\/code><code class=\"js keyword\">null<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">fullName: <\/code><code class=\"js string\">''<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number27 index26 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">branchName: <\/code><code class=\"js string\">''<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number28 index27 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">rollNo: <\/code><code class=\"js string\">''<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number29 index28 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">guardianPhoneNo: <\/code><code class=\"js string\">''<\/code><\/div>\n<div class=\"line number30 index29 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number31 index30 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number32 index31 alt1\">&nbsp;<\/div>\n<div class=\"line number33 index32 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">onSubmit(form: NgForm) {<\/code><\/div>\n<div class=\"line number34 index33 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Reset the message value.<\/code><\/div>\n<div class=\"line number35 index34 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.message = <\/code><code class=\"js string\">''<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number36 index35 alt1\">&nbsp;<\/div>\n<div class=\"line number37 index36 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Making the copy of the form and assigning it to the studentData.<\/code><\/div>\n<div class=\"line number38 index37 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">let<\/code> <code class=\"js plain\">studentData = Object.assign({}, form.value);<\/code><\/div>\n<div class=\"line number39 index38 alt2\">&nbsp;<\/div>\n<div class=\"line number40 index39 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ To avoid messing up the document id and just update the other details of the student. We will remove the 'property' from the student data.<\/code><\/div>\n<div class=\"line number41 index40 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">delete<\/code> <code class=\"js plain\">studentData.id;<\/code><\/div>\n<div class=\"line number42 index41 alt1\">&nbsp;<\/div>\n<div class=\"line number43 index42 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Does the insert operation.<\/code><\/div>\n<div class=\"line number44 index43 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">if<\/code> <code class=\"js plain\">(form.value.id == <\/code><code class=\"js keyword\">null<\/code><code class=\"js plain\">) {<\/code><\/div>\n<div class=\"line number45 index44 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.fireStore.collection(<\/code><code class=\"js string\">'students'<\/code><code class=\"js plain\">).add(studentData);<\/code><\/div>\n<div class=\"line number46 index45 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.message = studentData.fullName + <\/code><code class=\"js string\">' information is successfully saved!'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number47 index46 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">} <\/code><code class=\"js keyword\">else<\/code> <code class=\"js plain\">{<\/code><\/div>\n<div class=\"line number48 index47 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Does the update operation for the selected student.<\/code><\/div>\n<div class=\"line number49 index48 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ The 'studentData' object has the updated details of the student.<\/code><\/div>\n<div class=\"line number50 index49 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.fireStore.doc(<\/code><code class=\"js string\">'students\/'<\/code> <code class=\"js plain\">+ form.value.id).update(studentData);<\/code><\/div>\n<div class=\"line number51 index50 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.message = <\/code><code class=\"js string\">'Student successfully updated!'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number52 index51 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number53 index52 alt2\">&nbsp;<\/div>\n<div class=\"line number54 index53 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Reset the form if the operation is successful.<\/code><\/div>\n<div class=\"line number55 index54 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.resetForm(form);<\/code><\/div>\n<div class=\"line number56 index55 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number57 index56 alt2\"><code class=\"js plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h4>4.5.2 Creating a Student List Component<\/h4>\n<p><span style=\"text-decoration: underline;\">Student List component<\/span> maintains the student\u2019s view and deleting the student\u2019s information. We can create the student component by using the following Angular CLI command i.e. <code>ng generate component students\/student-list<\/code>.<\/p>\n<p><strong>Note<\/strong>: The above command will automatically create an entry for this file in the <code>app.module.ts<\/code>.<\/p>\n<h5>4.5.2.1 Student\u2019s List View Page<\/h5>\n<p>Add the following code to the <code>student.component.html<\/code> file. Please remember to include the <code>FormsModule<\/code> in <code>app.module.ts<\/code> file as this component will contain an interactive form.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>student.component.html<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_190922\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<div class=\"line number27 index26 alt2\">27<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h1<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"display-5 text-center\"<\/code><code class=\"html plain\">&gt;Student Details&lt;\/<\/code><code class=\"html keyword\">h1<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;&nbsp;&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\">&nbsp;<\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">table<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"table table-hover student-details-table-width\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">thead<\/code> <code class=\"html color1\">align<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"center\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Roll No.&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Name&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Branch Name&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Guardian Phone No.&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Edit?&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;Delete?&lt;\/<\/code><code class=\"html keyword\">th<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">thead<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">tbody<\/code> <code class=\"html color1\">align<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"center\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">tr<\/code> <code class=\"html plain\">*<\/code><code class=\"html color1\">ngFor<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"let studentInfo of studentList\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;{{studentInfo.rollNo}}&lt;<\/code><code class=\"html keyword\">span<\/code><code class=\"html plain\">&gt;.&lt;\/<\/code><code class=\"html keyword\">span<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;{{studentInfo.fullName}}&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;{{studentInfo.branchName}}&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;{{studentInfo.guardianPhoneNo}}&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;&lt;<\/code><code class=\"html keyword\">a<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"btn text-warning\"<\/code> <code class=\"html plain\">(click)=\"onEdit(studentInfo)\"&gt;&lt;<\/code><code class=\"html keyword\">i<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"fa fa-edit\"<\/code> <code class=\"html color1\">title<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Edit\"<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">i<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">a<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;&lt;<\/code><code class=\"html keyword\">a<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"btn text-danger\"<\/code> <code class=\"html plain\">(click)=\"onDelete(studentInfo)\"&gt;&lt;<\/code><code class=\"html keyword\">i<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"fa fa-trash\"<\/code> <code class=\"html color1\">title<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"Delete\"<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">i<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">a<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">td<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">tr<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">tbody<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">table<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number24 index23 alt1\">&nbsp;<\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"error\"<\/code> <code class=\"html plain\">*<\/code><code class=\"html color1\">ngIf<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"deleteMessage\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h5<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"text-dark\"<\/code><code class=\"html plain\">&gt;{{ deleteMessage }}&lt;\/<\/code><code class=\"html keyword\">h5<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number27 index26 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h5>4.5.2.2 Student Component<\/h5>\n<p>Add the following code to the <code>student-list.component.ts<\/code> file to perform the READ and DELETE operations in a Firebase database.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>student-list.component.ts<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_247174\" class=\"syntaxhighlighter  js\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<div class=\"line number27 index26 alt2\">27<\/div>\n<div class=\"line number28 index27 alt1\">28<\/div>\n<div class=\"line number29 index28 alt2\">29<\/div>\n<div class=\"line number30 index29 alt1\">30<\/div>\n<div class=\"line number31 index30 alt2\">31<\/div>\n<div class=\"line number32 index31 alt1\">32<\/div>\n<div class=\"line number33 index32 alt2\">33<\/div>\n<div class=\"line number34 index33 alt1\">34<\/div>\n<div class=\"line number35 index34 alt2\">35<\/div>\n<div class=\"line number36 index35 alt1\">36<\/div>\n<div class=\"line number37 index36 alt2\">37<\/div>\n<div class=\"line number38 index37 alt1\">38<\/div>\n<div class=\"line number39 index38 alt2\">39<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Component, OnInit } from <\/code><code class=\"js string\">'@angular\/core'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ StudentService } from <\/code><code class=\"js string\">'src\/app\/shared\/student.service'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ Student } from <\/code><code class=\"js string\">'src\/app\/shared\/student.model'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"js keyword\">import<\/code> <code class=\"js plain\">{ AngularFirestore } from <\/code><code class=\"js string\">'@angular\/fire\/firestore'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number5 index4 alt2\">&nbsp;<\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"js plain\">@Component({<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">selector: <\/code><code class=\"js string\">'app-student-list'<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">templateUrl: <\/code><code class=\"js string\">'.\/student-list.component.html'<\/code><code class=\"js plain\">,<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">styleUrls: [<\/code><code class=\"js string\">'.\/student-list.component.css'<\/code><code class=\"js plain\">]<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"js keyword\">export<\/code> <code class=\"js keyword\">class<\/code> <code class=\"js plain\">StudentListComponent <\/code><code class=\"js keyword\">implements<\/code> <code class=\"js plain\">OnInit {<\/code><\/div>\n<div class=\"line number12 index11 alt1\">&nbsp;<\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">deleteMessage: string;<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">studentList: Student[];<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">constructor(<\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">service: StudentService, <\/code><code class=\"js keyword\">private<\/code> <code class=\"js plain\">fireStore: AngularFirestore) { }<\/code><\/div>\n<div class=\"line number16 index15 alt1\">&nbsp;<\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">ngOnInit() {<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.service.getAllStudents().subscribe(response =&gt; {<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.studentList = response.map(document =&gt; {<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">return<\/code> <code class=\"js plain\">{<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">id: document.payload.doc.id,<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">...document.payload.doc.data() as {}&nbsp;&nbsp;&nbsp; <\/code><code class=\"js comments\">\/\/ Attention - Require typescript version &gt;3 to work!!<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">} as Student;<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">})<\/code><\/div>\n<div class=\"line number25 index24 alt2\">&nbsp;<\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js comments\">\/\/ Sorting the student-list in ascending order.<\/code><\/div>\n<div class=\"line number27 index26 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.studentList = <\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.studentList.sort((obj1, obj2) =&gt; (obj1 as any).rollNo - (obj2 as any).rollNo);<\/code><\/div>\n<div class=\"line number28 index27 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js plain\">});<\/code><\/div>\n<div class=\"line number29 index28 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number30 index29 alt1\">&nbsp;<\/div>\n<div class=\"line number31 index30 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">onEdit(student: Student) {<\/code><\/div>\n<div class=\"line number32 index31 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.service.formData = Object.assign({}, student);<\/code><\/div>\n<div class=\"line number33 index32 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number34 index33 alt1\">&nbsp;<\/div>\n<div class=\"line number35 index34 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">onDelete(student: Student) {<\/code><\/div>\n<div class=\"line number36 index35 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.fireStore.doc(<\/code><code class=\"js string\">'students\/'<\/code> <code class=\"js plain\">+ student.id).<\/code><code class=\"js keyword\">delete<\/code><code class=\"js plain\">();<\/code><\/div>\n<div class=\"line number37 index36 alt2\"><code class=\"js spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"js keyword\">this<\/code><code class=\"js plain\">.deleteMessage = student.fullName + <\/code><code class=\"js string\">' information is successfully deleted!'<\/code><code class=\"js plain\">;<\/code><\/div>\n<div class=\"line number38 index37 alt1\"><code class=\"js spaces\">&nbsp;&nbsp;<\/code><code class=\"js plain\">}<\/code><\/div>\n<div class=\"line number39 index38 alt2\"><code class=\"js plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>4.6 Templates Inclusion for View<\/h3>\n<p>In order to view the application\u2019s data on startup, we will need to modify the application design from default to custom. For that \u2013<\/p>\n<p>We will need to update the <code>students.component.html<\/code> to include the <code>student<\/code> and <code>student-list<\/code> components i.e.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>students.component.html<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_321146\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"row\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"col-md-5\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">app-student<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">app-student<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"col-md-7\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">app-student-list<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">app-student-list<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>Secondly, we will include the <code>students<\/code> component in the <code>app.component.html<\/code> file i.e.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>app.component.html<\/em><\/span><\/p>\n<div>\n<div id=\"highlighter_147637\" class=\"syntaxhighlighter  html\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">01<\/div>\n<div class=\"line number2 index1 alt1\">02<\/div>\n<div class=\"line number3 index2 alt2\">03<\/div>\n<div class=\"line number4 index3 alt1\">04<\/div>\n<div class=\"line number5 index4 alt2\">05<\/div>\n<div class=\"line number6 index5 alt1\">06<\/div>\n<div class=\"line number7 index6 alt2\">07<\/div>\n<div class=\"line number8 index7 alt1\">08<\/div>\n<div class=\"line number9 index8 alt2\">09<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code>&nbsp;<\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;&nbsp;&nbsp;&nbsp;&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"text-center\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">h1<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"display-5 text-info\"<\/code><code class=\"html plain\">&gt;&lt;<\/code><code class=\"html keyword\">i<\/code><code class=\"html plain\">&gt;Firebase CRUD operations via Angular&lt;\/<\/code><code class=\"html keyword\">i<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">h1<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">small<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">i<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"fa fa-copyright\"<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">i<\/code><code class=\"html plain\">&gt;&lt;<\/code><code class=\"html keyword\">span<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"ml-1\"<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">span<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">a<\/code> <code class=\"html color1\">target<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"_blank\"<\/code> <code class=\"html color1\">href<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"<a href=\"https:\/\/www.javacodegeeks.com\/\">https:\/\/www.javacodegeeks.com\/<\/a>\"<\/code><code class=\"html plain\">&gt;javacodegeeks.com&lt;\/<\/code><code class=\"html keyword\">a<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">small<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">br<\/code> <code class=\"html plain\">\/&gt;<\/code><\/div>\n<div class=\"line number11 index10 alt2\">&nbsp;<\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">div<\/code> <code class=\"html color1\">class<\/code><code class=\"html plain\">=<\/code><code class=\"html string\">\"container\"<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"html spaces\">&nbsp;&nbsp;<\/code><code class=\"html comments\">&lt;!--including the students\u2019 component into the application's parent module.--&gt;<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"html spaces\">&nbsp;&nbsp;<\/code><code class=\"html plain\">&lt;<\/code><code class=\"html keyword\">app-students<\/code><code class=\"html plain\">&gt;&lt;\/<\/code><code class=\"html keyword\">app-students<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"html plain\">&lt;\/<\/code><code class=\"html keyword\">div<\/code><code class=\"html plain\">&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>And done! We have created a simple page application that will perform the CRUD operations in the Firebase database.<\/p>\n<h2>5. Run the Application<\/h2>\n<p>As we are ready with all the changes, let us compile and run the angular application with <code>ng serve<\/code> command. Once the projects are successfully compiled and deployed, open the browser to test it.<\/p>\n<h2>6. Project Demo<\/h2>\n<p>Open your favorite browser and hit the angular application URL (<code>http:\/\/localhost:4200\/<\/code>) to display the welcome page of the application that shows the student form and the same student\u2019s list.<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"818\" height=\"449\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-demo-img1.jpg\" alt=\"CRUD Operations in Angular - Welcome Page\" class=\"wp-image-101943\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-demo-img1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-demo-img1-300x165.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-operations-demo-img1-768x422.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 3: Welcome Page<\/figcaption><\/figure>\n<p>That is all for this tutorial and I hope the article served you whatever you were expecting. Happy Learning and do not forget to share!<\/p>\n<h2>7. Conclusion<\/h2>\n<p>In this section, we learned how to perform CRUD operations in Firebase. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2><a name=\"projectDownload\"><\/a>8. Download the Angular Project<\/h2>\n<p>This was a tutorial of Basic Firebase CRUD Operations in Angular.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a target=\"_blank\" href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/02\/angular-firebase-crud-example.zip\" rel=\"noopener noreferrer\"><strong>Basic Firebase CRUD Operations in Angular<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a Typescript-based open-source framework that helps developers build single-page applications Offers Object-oriented features and supports the dynamic loading of the pages Supports Two-way data binding, Property ([]), and Event (()) binding techniques Supports command-line-interface &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[740,1707],"class_list":["post-101940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-angular-5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Basic Firebase CRUD Operations in Angular - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic Firebase CRUD Operations in Angular - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-14T05:00:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Basic Firebase CRUD Operations in Angular\",\"datePublished\":\"2020-02-14T05:00:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html\"},\"wordCount\":959,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular\",\"Angular 5\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html\",\"name\":\"Basic Firebase CRUD Operations in Angular - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2020-02-14T05:00:41+00:00\",\"description\":\"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/basic-firebase-crud-operations-in-angular.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Basic Firebase CRUD Operations in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basic Firebase CRUD Operations in Angular - Java Code Geeks","description":"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html","og_locale":"en_US","og_type":"article","og_title":"Basic Firebase CRUD Operations in Angular - Java Code Geeks","og_description":"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a","og_url":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2020-02-14T05:00:41+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Basic Firebase CRUD Operations in Angular","datePublished":"2020-02-14T05:00:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html"},"wordCount":959,"commentCount":2,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular","Angular 5"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html","url":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html","name":"Basic Firebase CRUD Operations in Angular - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2020-02-14T05:00:41+00:00","description":"Welcome readers, in this tutorial, we will perform the CRUD Operations in Firebase through an angular application. 1. Introduction Angular is a","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/basic-firebase-crud-operations-in-angular.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Basic Firebase CRUD Operations in Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/101940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=101940"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/101940\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=101940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=101940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=101940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}