Posts

Removing an existing Object in Angular using firebase

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

Updating an existing Object in Angular using firebase

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

Fetching List Of Data from firebase

Fetching List Of Data from Firebase 1. Creating a List Component  2. Fetch list of data from firebase. 1. Creating a List Component. ng g c list --spec=false The above command generates 3 file's as follow's  1. list.component.html 2. list.component.ts 3. list.component.css Here we will fetch the user's which we have already pushed into firebase in previous post. For reference please visit following link  https://angularfirebasedeveloper.blogspot.com/2018/10/pushing-form-data-into-fire-base.html  . 2. Fetching list of User's from firebase In list.component.ts import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] }) export class ListComponent implements OnInit { list = []; constructor(private db: AngularFireDatabase) { } ngOn...
Post a Comment
Read more

Pushing Form Data Into Fire base

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

Linking Angular Project with Fire base

Linking Angular Project with Fire base 1. Fire base Installation 2. Fire base configuration 3. Fire base setup with Angular Project. 1. Fire base Installation Use the following command to install fire base Command :  npm install angularfire2 firebase --save 2. Fire base Configuration a. Go to following link and login with your Gmail Credentials  Link:  https://console.firebase.google.com/ b. Click on Add Project link.  c. Enter Your Project Name in the field  d. Select and agree terms and conditions e. Click on Create Project Button f. After successful creation of project click on Continue button g. Home page appear's h. From side navigation bar Click on Database option i. You can create a cloud database or Real Time Database (In this we are selecting Real Time database). j. Scroll a little bit and you will see a Create Database button. Click on Create Database...
Post a Comment
Read more

Installation and Setup Fire Base with Angular

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