Angular 2 and Firebase - Introduction - Tutorial

Firebase is a mobile and web application platform supporting developers with various tools and services to build high-quality app. A central feature of Firebase is the realtime database. By using the Firebase API the realtime database can be used to store and snyc data across multiple clients and platforms.

Firebase is a perfect match for Angular 2 application. The realtime database can be used as a backend for your web and mobile application. Together with the speed and performance Angular 2 delivers for the front-end the realtime data sync feature is able to further improve the user experience.

To integrate Firebase services with Angular 2 application The AngularFire 2 library can be used. This is the official library for Firebase and Angular 2. In this video tutorial you'll learn how to set up a Firebase realtime database and bind to realtime data in your Angular 2 application by using the AngularFire 2 library step-by-step.

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

[LiaAdzumi]

Marry Christmas Sabestian,
I wish you and all your family are well and happy.

Please add more videos on Angular 2 with Firebase.
If possible, please create real world app using Angular 2 with Firebase from start to finish.

Thanks and appreciate a lot your great tutorials.

Nyoman, Bali, Indonesia

[LookNumber]

Beautifully done, Sebastian. Very clear. Thank you!

[MrLonelyOffc]

Super cool! Really this vid is a kick start for firebase beginners. Gud work

[haopeiyang]

Thank you for this series. I was looking forward to learning more complex database design in firebase. Do you have an interest in creating that series? There doesn't seem to be a good video tutorial on it.

[OneAndOnlyMe]

Some of this video is already out of date due to the nature on ongoing development with Angular and Firebase. It's very frustrating trying to learn Angular and Firebase when nearly every tutorial is out of date within mere months.

Instead of importing "AngularFile", now import "AngularFireDatabase";

Also, instead of:

constructor (private af : AngularFire)

Now use:

constructor (private db : AngularFireDatabase)
{
this.items = db.list('/items');
}

Given that even now, 17 July 2017, AngularFire2 is only release candidate 1, a lot can change before a stable release. So I would advise against building anything for production use, unless you don't mind the extra effort of keeping your project up to date.

[Nagare]

Great video on Firebase. Keep up the good work!

[saifsabti]

Really nice introduction. Keep up the great work!

[johnhansen]

Very Very good tut. Help me a lot. Thanks :)

[parrou]

great job, we hope see also authentication introduction ;),
Thank you

[dieselk]

Those of you who are receiving an error in compilation after adding: to the app.module.ts, you no longer need the ";" after it, just a ", " if you are listing other imports after.
like so:

imports: [
BrowserModule,
FormsModule,
HttpModule,
AngularFireModule.initializeApp(firebaseConfig),
RouterModule.forRoot([])
],

[josbex]

Gracias todo Ok, saludos de huaraz city

[aladouagi]

Thanks for the great explanations, please upload a tutorial about Apollo (GraphQL) and how it works with Angular 2 and Firebase.

[danghoanglinh]

thank for tutorial. Do you have this source of tutorial on github ?

[Luuniem]

Please make one with a form where I can enter items and it stores on firebase. Thanks =)

[Tufailjaveed]

can we use table tag in html instead of ul tag to display the data

[jordialmirall]

Great tutorial! However I get that error when I execute ng serve: " Cannot find type definition file for 'firebase'. " Do you know how can I solve it? Thanks!!!

[danforth]

It would help if you would turn up the sound of your microphone. It's very difficult to hear you whispering.

[lucassrt]

I already have angular 2 install in my project can I just use
npm install firebase --save instead of npm install angularfire2 firebase --save ???

[ZiosNeon]

If i want it to show everything from two diferent item list keys what can i do?

[lucassrt]

do you have your own repo for this that we can clone?