Angular & Firebase dashboard in 22 minutes

[@JigneshThummar]

when guy starts video with what you are going to get at end, i immediately liked it, i knew this guy not going to do any BS and going to talk straight to the point.. love such people

[@d-i-ry]

Hahaha! That’s great, I’m really glad you liked it. I hate watching tutorials that make me wait 5 minutes before I learn it’s not what I was looking for If you have any tutorial ideas/requests, let me know!

[@JigneshThummar]

@@d-i-ry sure ill let you know 👍

[@picflight]

Exactly!

[@rojaachan]

I had to make some minor changes to some lines of code since I'm watching this a year later but I was still able to get it to work rather easily. Thank you for such a raw and easy to understand tutorial! Please do more.

[@d-i-ry]

Glad it helped!

[@smartexplorate]

Great introduction. I like your fine description and conversation style. Means it is not to slow, not toooo fast and right to understand in 22 minutes very much. Thx for it.

[@d-i-ry]

Glad you enjoyed it!

[@ajayu95]

Thank you so much :), I was searching for an angular firebase auth tutorial for angular 11. this worked fine for me. all other tutorials were old and didn't work with the latest angular. thank you for putting your effort into making this video

[@d-i-ry]

Your comment made my day! Thank you Ajay! :)

[@merotuts9819]

If only all the tutorials on the web were like this. 💛

[@d-i-ry]

Thank you, @merotuts!

[@Satyam_deb]

Loved the video... Please do more videos on Angular and firebase!!

[@rembautimes8808]

Presentation style was really first class and kid friendly. In Asia, a lot of parents are sending their kids to coding school and this would be a good tutorial to follow (after 6 months of typescript basics). I am about 1 month into Angular/TS but have 2 years in Python so I can grasp the concept. Did the trifecta - Like, Sub and Comment.

[@d-i-ry]

Thank you for such a nice comment!! That made my day

[@ravindrachorge]

very helpful, havent finished video but cannot hold myself to apapriciate your work. liked it so much and very much helpful as all other video blogs are outdated and you presented it very well, really liked the way you trimmed basic parts like generating all components and all. Thanks, Subscribed..!

[@d-i-ry]

Hi Ravi, thank you so much! And thanks for the subscription :) When you have time to finish, make sure to use "ng new [yourProjectName] --strict false" ... that's changed in the last 2 months since I uploaded the video, and the "--strict false" part is needed now, otherwise, all types have to be perfectly matched for the project

[@ravindrachorge]

@@d-i-ry Thanks Ryan.

[@schmusekai]

That is an awesome tutorial! Very well explained, everything works how it should. As another comment already mentioned I would also be really interested in seeing "role-management" (e.g. that only an Admin can navigate to sertan pages)

[@d-i-ry]

Hi Kai, thanks!! And I’ll try to make a tutorial on role management, too

[@BhaveshSinghBhanucsgo]

hello sir ... name the extension you are using in vscode for giving theme or color to your text !!???? plz reply fast .. and give the full name of that theme

[@d-i-ry]

Haha! I was wondering if someone would ask! It’s called “Dracula at night”

[@n0nyabizness]

i like the video. When it started i was hoping you will use the real-time db. Do have anything on how this will look like with it? nice cat btw

[@d-i-ry]

Haha!! Thanks! The Realtime Database could be useful cause you don't get billed per read/write, but the drawback is that it's not meant for storing as complex documents. I went with Firestore cause I usually don't know everything I'll be storing as I start out, and I think it's easier to read the code :). I don't have any videos planned with Realtime Database, but let me know if you want to see something specific. I'm working on one for draging-and-droping files with Firestore & Angular right now

[@n0nyabizness]

@@d-i-ry wow in minutes. Well i have an app already and i just needed the bit for separating admins from normal users. I guess I'll just rummage the internet.Thanks anyway

[@d-i-ry]

@@n0nyabizness I can think of 3 general ways to do that, and I haven't gotten the impression that 1 is always preferred over the others. First, you can lock your database down so certain queries can only be run by admins (or users of whatever access level you choose). You can change that in Firestore > Rules tab, or in Realtime db > Rules tab. That's the hardcore Access Control Layer approach. The 2nd way is to work inside your auth.guard.ts file - having a series of rules in there saying that if the user doesn't have admin access, redirect them away from the content. And the 3rd way is to throw a bunch of ng-if's into your html, example "admin content here"

[@IDK-vm5om]

thank you so much for the great tutorial i was looking for tons of tutorial but your's is sweet,short and clear THANKS A LOT!!! : )

[@d-i-ry]

Awesome, I'm glad it helped!!

[@clayton7893]

Works like magic thank you

[@_MoshikoAz_]

very helpful, will do you firbase with angular guide with roles [such as admin/owner etc..] ?

[@d-i-ry]

Thanks Moshiko! I’ve been struggling to figure out an easy way to explain that topic, but I’ll make it a priority

[@_MoshikoAz_]

@@d-i-ry thanks

[@movoid12]

Thank you so much! it helped me alot! this is one of the best Angular and Firestore tutorial on KZbin ever! I would love see more tutorials about Angular and firestore and learn from you. Is that possible to make a part 2 video, where user can have a angular material data-table in the admin-dashboard with edit button on the right side? included edit window component to have the ability to edit values of different Document-IDs of one row. That will be really helpful to know how to do that! Thanks for the whole effort! I really appreciate it! keep going

[@d-i-ry]

Hi Passenger Twin, thank you so much!!! Here, these 2 videos take care of the admin account adding to / editing the database :) kzbin.info/www/bejne/p4rWh6Njo55-opI&ab_channel=D-I-Ry kzbin.info/www/bejne/rWjZfJaLf9GXY7c&ab_channel=D-I-Ry

[@movoid12]

Thank you! But i mean to edit values in a form to the firestore for specific row in a table that would be super helpful! Thanks

[@d-i-ry]

@@movoid12 I'm a little confused. Can you give me an example what you want to accomplish?

[@movoid12]

I made angular admin dashboard with a login. When you are logged in it appears a data table which has 4 columns: id, title, date, user. The data come from my firestore collection, every row in the table is has a document ID. I already built an icon to the right side of every row. What I need is, that when I click on that icon, to have the ability to edit the row data (the 4 values) and save it and these going to be updated automatically in the firestore when I confirm the edit. Hopefully I explained it well :)) Thanks Ryan! Kindly regards

[@d-i-ry]

@@movoid12 Here's a working example :) stackoverflow.com/questions/55304470/angular-firestore-collection-snapshot-changes#_=_ Check out the Stackblitz code, too stackblitz.com/edit/angular-cloud-firestore?file=src%2Fapp%2Fapp.component.ts

[@oliverqueen8428]

tthankyou so much sir you are a life saver your tutorial hapled a lot please keep making these amazing content ❤❤

[@d-i-ry]

That really means a lot, thank you!

[@blazweindorfer]

Hey thank you so much for this tutorial. The best explanation of all that are out there! I am wondering here how would we bind data from one collection with data from a nother collection... lets say our user does and exercise... we have exercises stored in a collection and we save done exercises in a nother collection... hoe could we bind our user to the done exercise and output just this users exercises? and not from all the other users?

[@d-i-ry]

Hi Blaž, thanks so much! Ok, there's a simple component to your question and a difficult part to it, too. Hard part first: what you really need to do is control read/write access on the database itself (as opposed to controlling it within the Angular app). I've wanted to make a video on the topic, but I'm still struggling with how to explain something so encompassing in about 10 minutes. You can read up on it here, firebase.google.com/docs/rules/basics Now for the easier part -- this isn't a long-term solution, but all you need to is set up 2 queries just like we did on the dashboard page of this tutorial. Or 3 or 4 queries ... however many collections or documents you'd like to view. There's no limit, and no need to only set up 1 connection.

[@namlehoai6183]

That is an awesome tutorial, I really appreciate it.

[@d-i-ry]

Hi Nam, I'm really glad it was helpful!

[@koriv6329]

Thanks for this video! I do have one thing. When I'm copying and pasting code, I'm getting an error in the admin-dashboard.component file where "this.user = null;" TS is saying that type null is not assignable to Observable what does this mean? Did I make a mistake somewhere?

[@d-i-ry]

Hi Kori, I'm glad you liked the video! Thanks :) I have a few questions for you: 1) Could you paste the exact error with the file and line number? 2) When you started building the dashboard, did you use this command: "ng new MyProjectName --strict false" (specifically with the "--strict false" part)? I had to add that to the text in the video's description because about 3 weeks after I uploaded the video, Angular made "strict" type-checking "true" by default, and all it sounds like is you have a variable type problem.

[@abdoulkande9450]

thank u so much your explanations are very clear

[@d-i-ry]

thanks Abdoul! im really glad to help you!

[@diraneserges6076]

Nice Tutorial, Please Could you do Video About Role Management. I have Admin and User, Admin can go to all Pages but User Can go only for one Page. Thanks

[@d-i-ry]

Hi Dirane, absolutely, it's on my list of videos to make. I'll link you once I can make it

[@figueduff]

Hello, excellent tutorial, very clear and practical. Could you add to the project login with gmail? and roles? Can you give roles to registered users with social networks? Thank you so much!! greetings from Argentina.

[@d-i-ry]

thank you so much!! that means a lot you said that :). you can add just about any mainstream login method you like. just go to Firebase > choose your project > Build > Authentication > Sign-in Method

[@d-i-ry]

and I'll add roles to my list of tutorial ideas. I didn't want to show roles here because it's a little complex. I need to sit down and figure out a clear way to explain the different ways to use roles -- and it's different based on if you want to navigate to a certain a web page vs if you should have rights to query a database

[@taraknathchowdhury6525]

Thank you, Very well explained. But retrieve data fireStore to Dashboard is not working,(although I changed the rule in firestore according to your rule ).How to get all firebase collection-document-collection data into my-app ???

[@d-i-ry]

Hi TarakNath, what’s your error message?

[@riebeck1986]

This helped a so much !! Thank you

[@d-i-ry]

Hi @kyouda, I'm really glad it helped you!

[@heliogonzalesrivas3695]

Good tutorial!!! Thank you

[@d-i-ry]

Thanks a lot, Helio!

[@zozo645]

Hello, good tutorial and very clear

[@d-i-ry]

Thanks a lot!

[@nik10gaming23]

Ohh c'mon that's just spoon feeding us lol ! Thanks for the video btw it helped a lot !

[@d-i-ry]

haha i'm really glad to hear! I swear I never did KZbin videos cause I was afraid of the comment section. I'm really glad it helped, and thx for the subscription!

[@bis444]

thanks for the tutorial , one of the best . but i have a error message . he dont want to add these module import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { AngularFireDatabaseModule } from '@angular/fire/database'; error : TS2305: Module '"@angular/fire"' has no exported member 'AngularFireModule'.

[@d-i-ry]

hi bis444, thanks a lot! I see errors like this when there's a brand new release of the Firebase libraries... Firebase breaks a lot, and they come back with a fix a few days later. Something you can do is go into your package.json file and tell it to use the previous version of firebase (which you can find from npmjs.com, and make sure you download that package as well. I hope this helps. You can also check your Angular and Firebase versions to make sure they're up to date

[@bis444]

@@d-i-ry i find a solution. Put compat in the way. Like import........ From @angular/fire/compat/auth

[@bis444]

hey ryan , i have a simple question , i put the signup page in the admin dashboard. only the admin can add a user . all working really great. but i have a issues . when i create a new user , directly my user object change , i'm not still the admin user , but i become the new user object of the form . and i dont find where is the function who make this lol . i'm suscribe because you explain very well !

[@bis444]

Do you have an idea ? I would like still in the admin users

[@d-i-ry]

@@bis444 thanks for the sub!! i think you can fix this problem by going to services/auth.service.js in the signupUser() function. when a user gets signed up, it changes your this.afs variable (the current user's AngularFirestore object) to have the new user's info. even though you're only going to allow admins to make new users, I wouldn't change that function. I'd make a new one called something like signupUserViaAdmin(). And in this new function, just don't set this.afs to the new info. Let me know if that works!

[@andrewbateman2282]

Thanks. Good as a tutorial.

[@d-i-ry]

Glad it was helpful! Thanks a lot!

[@ރަސްގެފާނު]

Thank you so much!

[@d-i-ry]

Glad you like!

[@d-i-ry]

I’ll be making an Angular 13 update soon

[@Matzul98]

Hi! How can we access user info in typescript? I only saw HTML accessing with async pype.

[@d-i-ry]

Hi Mihai, At 18:12, the HTML prints the user's info. If you jump over to 18:23, line 26 says "this.user = this.firestore.collection('users').doc(emailLower).valueChanges()" and that's what grabs the user info from Firestore using typescript. The "valueChanges()" function at the end is what makes Firebase great. It will watch the user's document in the database for changes and automatically show any updates on your HTML page without any extra code.

[@munnaprasad3812]

Awesome ! Thanks

[@d-i-ry]

I'm really glad it helped you!

[@nurasmarina865]

I try did it but mine got errors. " type 'null' is not assignable to type 'Observable ' " can you explain why?

[@d-i-ry]

Hi Nur, the Angular team *just* changed the "ng new" command, and strict type-checking is defaulted to being turned on always. There's 2 things you can do: 1) start a new project with the command "ng new MyProjectName --strict false" ..this will turn strict type-checking off or 2) you can go into the code, to the variable that's causing the error, and you can change it from this... var x:Observable ; to this... var x:Observable | null; I'd personally go with Choice #1 I hope that helps! Ryan

[@d-i-ry]

There's one more way. Follow this for your existing project, stackoverflow.com/questions/57566377/turning-off-strict-mode-in-angular

[@nurasmarina865]

@@d-i-ry I tried the first choice and it does help. No more error. million, billion, trillion thank you's :)

[@samuelagius716]

Hi , when i insert that command which is ng add @angular/fire I get a many choices to add either authentication ,firebase database and much more and obviously I selected those 2 because those 2 i need and when i add them and its says package install failed and gives me this error "Error.js:4 setTimeout(function () { throw err; }, 0); ^ TypeError: Cannot read property 'message' of undefined" Please Help !

[@d-i-ry]

Hi Samuel, let's start by updating your Angular Fire library. First, update npm... npm i -g npm Then close the terminal and open a new one, and now it's time to update the Firebase library... npm i @angular/fire How does it work when you do that? (I ask because @angular/fire often times breaks with certain versions of Angular, and it gets fixed a few days later)

[@samuelagius716]

@@d-i-ry It worked thanks :)

[@MGUPTA14]

very very helpful 👍👍

[@d-i-ry]

Glad it was helpful!

[@MGUPTA14]

after login , if i am going to Admin Dashboard page , it is showing ' Not Admin ' any quickfix please ?

[@d-i-ry]

Hi @@MGUPTA14 go to Firebase and check what your user status is there. The "signupUser" function in auth.service.ts sets up all new users as an "endUser". That's what you should be listed as in Firebase. Just change that manually and see if you now have access to the admin dashboard. Let me know!

[@MGUPTA14]

@@d-i-ry your solution worked Now i can acces ' admin Dashboard ' Thank You Sir 👍👍👍

[@d-i-ry]

@@MGUPTA14 No problem! I wrote the tutorial without a feature to make admins because it's already REALLY complex!! and there are going to be far fewer admins than regular users. maybe I should do a followup to show this?

[@IDK-vm5om]

thanks a lot

[@d-i-ry]

Welcome! Let me know if there's any topics you want to see in the future

[@TuanNguyen-rx1vf]

guys, it is better to downgrade the angular/cli from 12 or 13 to 11.2, as his project. I got a lot of trouble when applying this to cli12 or 13.

[@d-i-ry]

Hi Tuan, you just need to turn strict mode off. Check the video description, I wrote the solution there :)

[@TuanNguyen-rx1vf]

@@d-i-ry yeah, but when implementing the @angular/fire. I have to change some. it took me time to do, and some troubles behind that as well. so I believe it is better no to update angular/cli for every starting project.

[@KiprotichJusto]

Just a concern; Why don't you just code step by step instead of copying and pasting?

[@d-i-ry]

Hi Shadrack, I don't code like that because even though the video's 22 minutes long, it took me 3 hours to write the project. So I'd rather have you pause the video to copy (or grab the code from the gitlab link) than have to sit through something 6 times as long :)

[@d-i-ry]

and thanks for subscribing!