{"id":12847,"date":"2020-08-30T13:15:17","date_gmt":"2020-08-30T07:45:17","guid":{"rendered":"https:\/\/code4developers.com\/?p=12847"},"modified":"2020-08-30T13:15:17","modified_gmt":"2020-08-30T07:45:17","slug":"connect-firebase-database-and-angular-app","status":"publish","type":"post","link":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","title":{"rendered":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch"},"content":{"rendered":"<p>In this tutorial, We are going to learn\u00a0<strong>How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?<\/strong>. We\u2019ll be using\u00a0<strong>AngularFire library<\/strong> for setting up Firebase database in the Angular web application.<!--more--><\/p>\n<div class=\"excerpt\">\n<p>Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to create faster and quicker web and mobile applications. It supports iOS, OS X, Android and web platforms. It doesn\u2019t require server-side backend programming language.<\/p>\n<\/div>\n<div class=\"LinkedBlock\">\n<h2 id=\"advantages-of-using-angularfire-library\">Advantages of using AngularFire Library<\/h2>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Supports Push Notifications.<\/li>\n<li>Offline Data Storage.<\/li>\n<li>Allows ngrx API Implementation.<\/li>\n<li>Based on the RxJS Observable Pattern.<\/li>\n<li>Real-time Data Sync Across All the devices.<\/li>\n<li>Support Download, Upload &amp; Delete Images, Video\u00a0&amp; Blob Files.<\/li>\n<li>Support user authentication (Google, Facebook, Twitter, Github,\u00a0Email &amp; password)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<\/div>\n<blockquote>\n<h4 id=\"table-of-contents\">Table of Contents<\/h4>\n<\/blockquote>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol class=\"OrderedList\">\n<li>\n<blockquote><p>Prerequisite<\/p><\/blockquote>\n<\/li>\n<li>\n<blockquote><p>Setup Angular Project using Angular CLI<\/p><\/blockquote>\n<\/li>\n<li>\n<blockquote><p>Setup Google Firebase Database Account<\/p><\/blockquote>\n<\/li>\n<li>\n<blockquote><p>Setup Firebase (AngularFire library) in AngularProject<\/p><\/blockquote>\n<\/li>\n<li>\n<blockquote><p>GitHub Project Files<\/p><\/blockquote>\n<\/li>\n<li>\n<blockquote><p>Conclusion<\/p><\/blockquote>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3 id=\"prerequisite\"><span id=\"Prerequisite\">Prerequisite<\/span><\/h3>\n<p>In order to work with this demo you must have Node.js and Angular CLI installed in your system. If you are beginner then you should check out this tutorial to:\u00a0<a href=\"https:\/\/code4developers.com\/intro-to-express\/\">Set up Node JS<\/a><\/p>\n<div class=\"vdo-ads-wrapper text-center\">\n<div id=\"bsa-zone_1574377626597-7_123456\" class=\"bsa-ad\" data-google-query-id=\"CInd1J6owOsCFYmfSwUdjz0Ksg\">\n<div id=\"google_ads_iframe_\/8691100\/Positronx_S2S_InContent_Leaderboard_2_0__container__\"><\/div>\n<\/div>\n<\/div>\n<p>Enter command in the terminal to install the latest version of Angular CLI:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"classic\">#install angular cli\r\nnpm install @angular\/cli -g<\/pre>\n<h2 id=\"setup-angular-project-using-angular-cli\">Setup Angular Project using Angular CLI<\/h2>\n<p>Run command to install Angular 8 project:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"classic\">ng new angular-firebase\r\n\r\n# ? Would you like to add Angular routing? Yes\r\n# ? Which stylesheet format would you like to use? CSS<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\">cd angular-firebase<\/pre>\n<h2 id=\"setup-google-firebase-database-account\">Setup Google Firebase Database Account<\/h2>\n<p><a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Go to Firebase website<\/a>\u00a0login using your email id. When you see given below screen click on Add Project section.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"12855\"  data-permalink=\"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/add_firebase_project\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?fit=850%2C587&amp;ssl=1\"  data-orig-size=\"850,587\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"add_firebase_Project\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?fit=800%2C552&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?fit=700%2C483&amp;ssl=1\"  class=\" wp-image-12855 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"add_firebase_Project\"  width=\"577\"  height=\"398\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 577px) 100vw, 577px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project-300x207.jpg\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=300%2C207&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=800%2C552&amp;ssl=1 800w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=120%2C83&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=90%2C62&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=320%2C221&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=560%2C387&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=240%2C166&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=180%2C124&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=640%2C442&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=700%2C483&amp;ssl=1 700w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?resize=768%2C530&amp;ssl=1 768w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/add_firebase_Project.jpg?w=850&amp;ssl=1 850w\" ><\/p>\n<p>&nbsp;<\/p>\n<p>Afterward, Enter your project name, accept the terms and condition and click on create a project button.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"12858\"  data-permalink=\"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/setup-firebase-01\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?fit=850%2C690&amp;ssl=1\"  data-orig-size=\"850,690\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"setup-firebase-01\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?fit=800%2C649&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?fit=700%2C568&amp;ssl=1\"  class=\" wp-image-12858 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"setup-firebase-01\"  width=\"671\"  height=\"546\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 671px) 100vw, 671px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01-300x244.jpg\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=300%2C244&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=120%2C97&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=90%2C73&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=320%2C260&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=560%2C455&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=240%2C195&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=180%2C146&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?resize=640%2C520&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/setup-firebase-01.jpg?w=850&amp;ssl=1 850w\" ><\/p>\n<p>Once your project is set up, then click on your project then you\u2019ll see your admin dashboard navigate to\u00a0<span style=\"color: #00ccff;\"><code>Develop<\/code><\/span>\u00a0&gt;\u00a0<span style=\"color: #00ccff;\"><code>Authentication<\/code><\/span>\u00a0&gt;\u00a0<span style=\"color: #00ccff;\"><code>Web setup<\/code><\/span>\u00a0click on Web setup button, and a popup will appear along with your firebase credentials.<\/p>\n<p>Copy\u00a0<strong>your firebase credentials<\/strong>\u00a0from here.<\/p>\n<p><span style=\"color: #000000;\"><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"12857\"  data-permalink=\"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/creds-firebase\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?fit=850%2C445&amp;ssl=1\"  data-orig-size=\"850,445\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"creds-firebase\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?fit=800%2C419&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?fit=700%2C366&amp;ssl=1\"  class=\"aligncenter wp-image-12857 pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"firebase database\"  width=\"738\"  height=\"386\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 738px) 100vw, 738px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase-300x157.jpg\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=800%2C419&amp;ssl=1 800w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=120%2C63&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=90%2C47&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=320%2C168&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=560%2C293&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=240%2C126&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=180%2C94&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=640%2C335&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=700%2C366&amp;ssl=1 700w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?resize=768%2C402&amp;ssl=1 768w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/creds-firebase.jpg?w=850&amp;ssl=1 850w\" ><\/span><\/p>\n<h2 id=\"setup-firebase-angularfire-library-in-angular-project\">Setup Firebase (AngularFire library) in Angular Project<\/h2>\n<p>Once you are done with setting up the angular project and firebase account.\u00a0 It\u2019s time to install\u00a0<strong>AngularFire<\/strong>\u00a0and\u00a0<strong>Firebase<\/strong>\u00a0from NPM.<\/p>\n<p>Run the given below cmd in Angular CLI.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"classic\">#install firebase\r\nnpm install firebase @angular\/fire --save<\/pre>\n<p><strong>Let\u2019s create the connection between firebase and your angular project.<\/strong><\/p>\n<p>Go to\u00a0<code>src\/environments\/enviorment.ts<\/code>\u00a0and\u00a0<code>enviorment.prod.ts<\/code>\u00a0files in your project folder. Then add\u00a0<strong>your firebase configuration details\u00a0<\/strong>in both the environment files as given below.<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"12856\"  data-permalink=\"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/ang-setting\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?fit=850%2C393&amp;ssl=1\"  data-orig-size=\"850,393\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"ang-setting\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?fit=800%2C370&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?fit=700%2C324&amp;ssl=1\"  class=\" wp-image-12856 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"ang-setting\"  width=\"669\"  height=\"310\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 669px) 100vw, 669px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting-300x139.jpg\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=300%2C139&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=800%2C370&amp;ssl=1 800w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=120%2C55&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=90%2C42&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=320%2C148&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=560%2C259&amp;ssl=1 560w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=240%2C111&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=180%2C83&amp;ssl=1 180w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=640%2C296&amp;ssl=1 640w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=700%2C324&amp;ssl=1 700w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?resize=768%2C355&amp;ssl=1 768w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/ang-setting.jpg?w=850&amp;ssl=1 850w\" ><\/p>\n<p>Now, import\u00a0<strong>AngularFireModule\u00a0<\/strong>and<strong>\u00a0environment<\/strong>\u00a0in\u00a0<code>app.module.ts<\/code>\u00a0file, then declare\u00a0<strong>AngularFireModule<\/strong>\u00a0into the imports array.<\/p>\n<p>You can optionally use your FirebaseApp name with the itializeApp method.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"beyond\">import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n\/\/ Firebase\r\nimport { AngularFireModule } from '@angular\/fire';\r\nimport { environment } from '..\/environments\/environment';\r\n\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name')\r\n  ],\r\n  declarations: [ AppComponent ],\r\n  bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule {}<\/pre>\n<p>Now you are all set to use\u00a0<strong>Firebase Realtime NoSQL cloud database<\/strong>\u00a0with your Angular App.<\/p>\n<p>In next step, I\u2019ll discuss how to import various Firebase modules in\u00a0<code>app.module.ts<\/code><\/p>\n<h4 id=\"import-firebase-modules-efficiently\">Import Firebase modules efficiently<\/h4>\n<p>There are various Firebase modules available for performing certain database tasks. But it is always advisable to use only required Firebase modules in your project.<\/p>\n<p>If you are building authentication service in your app. Then only import\u00a0<code>AngularFireAuthModule<\/code>\u00a0in\u00a0<code>app.module.ts<\/code>\u00a0file. By this\u00a0way, you\u2019ll be able to keep your overall app size to low.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\" data-enlighter-theme=\"beyond\">import { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\n\/\/ Firebase modules\r\nimport { AngularFireModule } from '@angular\/fire';\r\nimport { AngularFirestoreModule } from '@angular\/fire\/firestore';\r\nimport { AngularFireStorageModule } from '@angular\/fire\/storage';\r\nimport { AngularFireAuthModule } from '@angular\/fire\/auth';\r\nimport { environment } from '..\/environments\/environment';\r\n\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    AngularFireModule.initializeApp(environment.firebaseConfig, 'my-app-name'), \/\/ Required for everything\r\n    AngularFirestoreModule, \/\/ Only required for database features\r\n    AngularFireAuthModule, \/\/ Only required for auth features,\r\n    AngularFireStorageModule \/\/ Only required for storage features\r\n  ],\r\n  declarations: [ AppComponent ],\r\n  bootstrap: [ AppComponent ]\r\n})\r\nexport class AppModule {}<\/pre>\n<h2 id=\"project-files\">Project Files<\/h2>\n<p>Click on the below button to get the code files from Git repo.<\/p>\n[button href=&#8221;https:\/\/github.com\/arifkhoja\/angularfirebase&#8221; style=&#8221;emboss&#8221; size=&#8221;large&#8221; width=&#8221;100%&#8221; color=&#8221;#1e73be&#8221; hovercolor=&#8221;#8224e3&#8243; textcolor=&#8221;#ffffff&#8221; texthovercolor=&#8221;#ffffff&#8221; target=&#8221;_blank&#8221; icon=&#8221;github&#8221;]Git Repo[\/button]\n<p>&nbsp;<\/p>\n<h4 id=\"conclusion\">Conclusion<\/h4>\n<p>In this Angular tutorial, I\u2019ve talked about Google Firebase database and its powerful\u00a0features. You will learn to create an account in Google firebase.\u00a0How to setup firebase services in your Angular project and How to create basic CRUD services using Firebase API. I hope you\u2019d love this tutorial If you\u2019ll find this article useful then let it reach to others.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in&hellip;<\/p>\n","protected":false},"author":7,"featured_media":12863,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,901,152,1390],"tags":[172,29,886,256,1392,1388,1391,292,1389],"powerkit_post_featured":[],"class_list":{"0":"post-12847","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"category-angular-10","9":"category-angular5","10":"category-firebase","11":"tag-angualr-5","12":"tag-angular","13":"tag-angular-10","14":"tag-angular-7","15":"tag-angular-cli","16":"tag-firebase","17":"tag-firebase-database","18":"tag-googleapi","19":"tag-nosql-database"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-3ld","jetpack-related-posts":[{"id":3007,"url":"https:\/\/code4developers.com\/angular-4-components\/","url_meta":{"origin":12847,"position":0},"title":"Angular 4 Components","author":"Nisarg Dave","date":"July 28, 2017","format":false,"excerpt":"In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development.\u00a0The advantage of the component-based approach is\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3435,"url":"https:\/\/code4developers.com\/angular-5\/","url_meta":{"origin":12847,"position":1},"title":"Angular 5 &#8211; Video Tutorials","author":"Nisarg Dave","date":"April 14, 2018","format":false,"excerpt":"Angular version 5 - Googles's popular and open source JavaScript framework for building and developing single page mobile and desktop application. The latest version of Angular, Angular 5 was announced to users in 1st November 2017. Angular 5 is focused on making the Angular application smaller , faster and easier\u2026","rel":"","context":"In &quot;Angular 5&quot;","block_context":{"text":"Angular 5","link":"https:\/\/code4developers.com\/category\/angular5\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":12847,"position":2},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":12847,"position":3},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":9279,"url":"https:\/\/code4developers.com\/what-is-new-in-angular-10\/","url_meta":{"origin":12847,"position":4},"title":"What is new in Angular 10?","author":"Yatendrasinh Joddha","date":"June 25, 2020","format":false,"excerpt":"Today Angular Teams has announced Version 10.0.0 of Angular! This release is smaller than typical, but it covers the entire platform, including the framework, Angular Material, and the CLI. What's new here? Optional Stricter Settings ng new --strict Enabling this flag initializes your new project with a few new settings\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/miro.medium.com\/max\/60\/0*ruU5G-8_hqEp3UBY?q=20","width":350,"height":200},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":12847,"position":5},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/12847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=12847"}],"version-history":[{"count":10,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/12847\/revisions"}],"predecessor-version":[{"id":12864,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/12847\/revisions\/12864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/12863"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=12847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=12847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=12847"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=12847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}