Posts

Showing posts from March, 2018

AngularFire2 Set up

Image
In order to use Firebase as your database in Angular2 project it is essential to import AngularFire2 library to your project.For this you can refer the GitHub documentation   and get an idea. At first you have to import the library using the following code. npm install firebase angularfire2 --save Now move on to your app.module.ts file of your project and import the library. using the below code. import { AngularFirestore } from ' angularfire2/firestore ' ; And then you need to export the configuration in the same file.Use the below code to change according to your project. export const   firebaseConfig={ apikey :'', authDomain:'', databaseURL:'', storageBucket:'', messagingSenderID:'' }; Obtain the configurations according to your project through your firebase project.There you will get a similar window as below. Now import the Module using the following code. AngularFireModule.initializeApp(firebaseConfig

Routing your Angular2 Project

Image
In order to work with different modules in your web project it is essential to create Routes so that you can easily navigate through your navbar components or sidebar components.This article will help you to get through navigation by importing RouterModule.Make sure that you have installed Angular CLI. Import RouterModule To import RouterModule move on to your app.module.ts file and import using the following code. import { RouterModule,Routes } from '@angular/router'; Then add the RouterModule to the imports which in the below of the same file. RouterModule.forRoot(appRoutes) Now create the path to your HomeCompoent.The directory structure of my project is below. Here I have created components called home,addstudent and viewstudent. The paths for those components are created as below. const appRoutes:Routes = [ {path:'',component:HomeComponent}, {path:'add',component:AddstudentComponent}, {path:'view',component:Viewstudent

How the database works in Firebase

Image
From previous articles we went through a brief introduction on Firebase. After creating the database to the project the data should be added to the database.Now connect your firebase project with your web project. Now in your firebase dashboard click the database tab.Now you will get a similar window given below. Click real time database as we are creating a realtime database.Now you will get the below window where an object of the web project is already created. Now click the the plus mark which is on the object to create a new table. Here you have given two fields on Name and value. you have to enter the name and the value.And also the Firebase database is a similar to a tree diagram where you should create your tables based on it. As an example I will create my database based on the tables given below.  Given below is my created database based on the above two tables. If you click a particular key that you have created, the link above will automaticall

Angular2 Popup Modal Window

Image
Popup Modals are nowadays come in to play in a handy way which can be seen in most of the modern web applications. These Popup modals are usually come as a form, as confirmation message or can be used for many other activities in the web application. Though creating a Popup  modal is not a very big deal this article will help you to get to know how to create a popup model  in Angular. Go to your Angular project folder and you should import Popup library to your project. npm install ng2-opd-popup --save Now run the project. Now copy the following import code from the npm guide  and paste it in app.module.ts import   { PopupModule }   from   ' ng2-opd-popup ' ; Also you have to paste PopupModule . forRoot ( ) inside the imports in the same file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http

How to Add Firebase to your Android Project

Image
From the previous article I gave you a brief introduction on Firebase. This article will help you to know how to add Fire base to your Android project.Lets get started . Go to your firebase dashboard for the android project that we created in the last article.You would get a similar interface as below. But this may be changes with time. On the dashboard there is an option to select Add firebase to your Android app.Select it and you will get similar window as given below. Here you will be asked the Android package name which is the package name of your added Android project. Add it there. com.example.user.myandroidapp is my package name and you can get it from MainActivity.java file. Next you will be asked to fill the  Debug signing certificate SHA-1   . This is optional but it is good to add it.  To add this go to your android studio and click the button Gradle in the top right.You will get a similar window given below.Click signingReport So now you will