title
Angular & FireStore Application [1] - Setup & Getting Data

description
Part 1 of 3: We will setup FireStore from Firebase, create an Angular 4 application and integrate AngularFire2 to work with FireStore and fetch items. We will also install Materialize CSS and Font Awesome for our app UI CODE: Code for this project https://github.com/bradtraversy/angularfs ANGULAR 4 FRONT TO BACK: $10 COUPON https://www.udemy.com/angular-4-front-to-back/?couponCode=TRAVERSY010 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'Angular & FireStore Application [1] - Setup & Getting Data', 'heatmap': [{'end': 1609.731, 'start': 1558.39, 'weight': 0.824}, {'end': 1799.29, 'start': 1771.397, 'weight': 0.759}, {'end': 1980.667, 'start': 1917.339, 'weight': 0.745}], 'summary': 'Series demonstrates building a real-time angular application with firestore, covering setup, configuration, integration of angularfiremodule, item service, refactoring, data fetching, and items handling, utilizing angular 4, materialize css, firebase, angularfire2, and other relevant dependencies.', 'chapters': [{'end': 194.814, 'segs': [{'end': 53.443, 'src': 'embed', 'start': 7.699, 'weight': 0, 'content': [{'end': 10.4, 'text': "Hey, what's going on, guys? So I have a new project series for you.", 'start': 7.699, 'duration': 2.701}, {'end': 17.924, 'text': "We're going to be building an Angular application from scratch using the new Firestore Cloud Platform from Firebase.", 'start': 10.44, 'duration': 7.484}, {'end': 25.948, 'text': 'Now, Firestore allows you to store, sync, and query data for web applications or mobile applications.', 'start': 18.484, 'duration': 7.464}, {'end': 30.79, 'text': "And it's supposed to be really scalable as well as really fast.", 'start': 26.368, 'duration': 4.422}, {'end': 37.394, 'text': "And I've had quite a few requests for this, especially from people that went through my Angular 4 Udemy course,", 'start': 31.251, 'duration': 6.143}, {'end': 40.956, 'text': 'where we used Firebase to build a pretty decent sized application.', 'start': 37.394, 'duration': 3.562}, {'end': 47.799, 'text': "And if you want to get into things like Firebase authentication and stuff like that, I'd suggest checking that course out.", 'start': 40.976, 'duration': 6.823}, {'end': 50.481, 'text': "I'll put a promo link in the description.", 'start': 48.099, 'duration': 2.382}, {'end': 51.681, 'text': 'all right.', 'start': 51.241, 'duration': 0.44}, {'end': 53.443, 'text': 'so this is the application here.', 'start': 51.681, 'duration': 1.762}], 'summary': 'Building angular app with firestore from firebase for scalable, fast data storage and query.', 'duration': 45.744, 'max_score': 7.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w7699.jpg'}, {'end': 127.46, 'src': 'embed', 'start': 104.335, 'weight': 5, 'content': [{'end': 113.585, 'text': 'okay. so in addition to adding them, obviously we can read them and list them, and then if i click on one of these icons over here, these edit icons,', 'start': 104.335, 'duration': 9.25}, {'end': 117.569, 'text': "it'll pull down a little form and we'll be able to update the items.", 'start': 113.585, 'duration': 3.984}, {'end': 127.46, 'text': "so let's change this to item five and this this changes, as i type right here because we have our two-way data binding with angular And, by the way,", 'start': 117.569, 'duration': 9.891}], 'summary': 'The system allows adding, reading, and updating items with two-way data binding in angular.', 'duration': 23.125, 'max_score': 104.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w104335.jpg'}, {'end': 194.814, 'src': 'embed', 'start': 152.679, 'weight': 3, 'content': [{'end': 157.684, 'text': 'Alright and if you want to delete it you can click on the edit icon again and you can click on delete item.', 'start': 152.679, 'duration': 5.005}, {'end': 161.548, 'text': 'You can also double click the item itself to delete it.', 'start': 158.264, 'duration': 3.284}, {'end': 165.531, 'text': "Alright and you can see that that's been updated in Firestore as well.", 'start': 162.088, 'duration': 3.443}, {'end': 167.974, 'text': "Alright so that's what we'll be building guys.", 'start': 166.212, 'duration': 1.762}, {'end': 174.24, 'text': "So the very first step is to create our Firestore so that's what we're going to do next.", 'start': 168.775, 'duration': 5.465}, {'end': 181.448, 'text': "Hey guys, if you've been watching my videos for a while and you really like what I do and I've helped you out a lot, consider becoming a patron.", 'start': 175.285, 'duration': 6.163}, {'end': 186.47, 'text': 'Even for $1 per month, it pushes me to keep bringing you guys the best content I possibly can.', 'start': 181.608, 'duration': 4.862}, {'end': 191.512, 'text': "There's reward tiers for discounts, free Udemy courses, personal support, and more.", 'start': 186.83, 'duration': 4.682}, {'end': 194.814, 'text': 'So check out the Patreon link in the description below for more info.', 'start': 191.592, 'duration': 3.222}], 'summary': 'The tutorial covers creating and updating firestore, with a call to action for patreon support.', 'duration': 42.135, 'max_score': 152.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w152679.jpg'}], 'start': 7.699, 'title': 'Building real-time angular app with firestore', 'summary': 'Covers building an angular application with firestore, offering scalable storage and sync capabilities, in response to user requests from the angular 4 udemy course, while also demonstrating a real-time item manager using firestore, angular 4, and materialize css for adding, updating, and deleting items with real-time updates.', 'chapters': [{'end': 53.443, 'start': 7.699, 'title': 'Building angular app with firestore', 'summary': 'Discusses building an angular application from scratch using firestore cloud platform from firebase, which offers scalable and fast storage, sync, and query capabilities for web and mobile applications, and is in response to requests from users of the angular 4 udemy course.', 'duration': 45.744, 'highlights': ['Firestore Cloud Platform from Firebase is used for building an Angular application and provides scalable and fast storage, sync, and query capabilities for web and mobile applications.', 'The chapter responds to requests from users of the Angular 4 Udemy course, where Firebase was used to build a decent sized application.']}, {'end': 194.814, 'start': 53.443, 'title': 'Real-time item manager with firestore & angular', 'summary': 'Demonstrates building a real-time item manager using firestore, angular 4, and materialize css, allowing users to add, update, and delete items with real-time updates in the firestore backend.', 'duration': 141.371, 'highlights': ['The chapter demonstrates building a real-time item manager using Firestore, Angular 4, and Materialize CSS. The chapter showcases the process of building a real-time item manager using Firestore as the backend, Angular 4 as the framework, and Materialize CSS for the frontend.', 'Users can add, update, and delete items with real-time updates in the Firestore backend. The demonstration includes functionalities for adding, updating, and deleting items with real-time updates in the Firestore backend, showcasing the seamless integration and functionality of the system.', 'Users can use two-way data binding with Angular for updating items. The demonstration highlights the use of two-way data binding with Angular for updating items, providing a dynamic and responsive user interface experience.', 'The demonstration encourages support through Patreon for more content. The presenter encourages viewers to support through Patreon, offering various reward tiers for different contribution levels, fostering a sense of community and support for the content creator.']}], 'duration': 187.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w7699.jpg', 'highlights': ['Firestore Cloud Platform from Firebase provides scalable and fast storage, sync, and query capabilities for web and mobile applications.', 'The chapter responds to requests from users of the Angular 4 Udemy course, where Firebase was used to build a decent sized application.', 'The chapter demonstrates building a real-time item manager using Firestore, Angular 4, and Materialize CSS.', 'Users can add, update, and delete items with real-time updates in the Firestore backend.', 'The demonstration includes functionalities for adding, updating, and deleting items with real-time updates in the Firestore backend, showcasing the seamless integration and functionality of the system.', 'Users can use two-way data binding with Angular for updating items.', 'The presenter encourages viewers to support through Patreon, offering various reward tiers for different contribution levels, fostering a sense of community and support for the content creator.']}, {'end': 652.593, 'segs': [{'end': 266.913, 'src': 'embed', 'start': 218.707, 'weight': 0, 'content': [{'end': 227.935, 'text': "so we're gonna click add new project and we're gonna call this Let's call it FS1 prod for production and then create project.", 'start': 218.707, 'duration': 9.228}, {'end': 229.958, 'text': 'All right.', 'start': 229.737, 'duration': 0.221}, {'end': 231.96, 'text': "And that's going to generate everything for us.", 'start': 229.978, 'duration': 1.982}, {'end': 240.629, 'text': "And just because you use Firestore doesn't mean that you can't use, you know, Firebase authentication or storage or all that stuff.", 'start': 234.342, 'duration': 6.287}, {'end': 241.51, 'text': 'All right.', 'start': 241.289, 'duration': 0.221}, {'end': 244.473, 'text': "It's just using the Firestore instead of the real time database.", 'start': 241.53, 'duration': 2.943}, {'end': 252.575, 'text': "All right, so once that's set up, you'll get your standard Firebase backend.", 'start': 248.971, 'duration': 3.604}, {'end': 254.758, 'text': 'But what we want to do is go over to Database.', 'start': 252.676, 'duration': 2.082}, {'end': 261.206, 'text': 'And then instead of choosing the real-time database, we want to choose the Cloud Firestore.', 'start': 255.739, 'duration': 5.467}, {'end': 263.649, 'text': "So we're going to click Try Firestore Beta.", 'start': 261.245, 'duration': 2.404}, {'end': 266.913, 'text': "And at the time you're watching this, it may not be in beta anymore.", 'start': 263.99, 'duration': 2.923}], 'summary': 'Setting up firestore in a new project for production with firebase backend.', 'duration': 48.206, 'max_score': 218.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w218707.jpg'}, {'end': 334.836, 'src': 'embed', 'start': 308.705, 'weight': 1, 'content': [{'end': 316.329, 'text': "so once that's set up, you'll see a screen like this now what's really nice about firestore is the interface it gives us to actually add data.", 'start': 308.705, 'duration': 7.624}, {'end': 322.492, 'text': 'when we use the regular real-time database, we actually have to just add custom json, which is kind of annoying.', 'start': 316.329, 'duration': 6.163}, {'end': 334.836, 'text': "so we can just click add collection here and we'll say items next, and then for the document id, we're going to leave it to auto id, to auto generate,", 'start': 322.492, 'duration': 12.344}], 'summary': 'Firestore provides a user-friendly interface for adding data, eliminating the need for custom json.', 'duration': 26.131, 'max_score': 308.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w308705.jpg'}, {'end': 431.712, 'src': 'embed', 'start': 402.989, 'weight': 3, 'content': [{'end': 405.151, 'text': "So there's a lot of good documentation here.", 'start': 402.989, 'duration': 2.162}, {'end': 406.912, 'text': "We're not following it to a T.", 'start': 405.771, 'duration': 1.141}, {'end': 410.495, 'text': 'For example, they show you how to bring it into a component here.', 'start': 407.532, 'duration': 2.963}, {'end': 413.617, 'text': "We're actually going to create a service, which is a better thing to do,", 'start': 410.555, 'duration': 3.062}, {'end': 423.626, 'text': 'because then your service is expandable across all of your components rather than just bringing in what you need from Angular Fire in every single component,', 'start': 413.617, 'duration': 10.009}, {'end': 424.747, 'text': "so you don't repeat yourself.", 'start': 423.626, 'duration': 1.121}, {'end': 429.31, 'text': "So we'll do things a little more difficult but much more efficient.", 'start': 425.587, 'duration': 3.723}, {'end': 431.712, 'text': "so let's generate our application now.", 'start': 430.171, 'duration': 1.541}], 'summary': 'Using a service instead of a component for expandable efficiency.', 'duration': 28.723, 'max_score': 402.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w402989.jpg'}, {'end': 480.263, 'src': 'embed', 'start': 449.044, 'weight': 5, 'content': [{'end': 449.625, 'text': 'this will gen.', 'start': 449.044, 'duration': 0.581}, {'end': 454.448, 'text': 'this will make it so that we can generate any angular application from any directory.', 'start': 449.625, 'duration': 4.823}, {'end': 463.871, 'text': "All right, so I'm going to create my project folder here in my Dropbox code prod folder.", 'start': 457.389, 'duration': 6.482}, {'end': 469.453, 'text': 'And to create a new application, we just need to do ng new and then the name of the application.', 'start': 464.492, 'duration': 4.961}, {'end': 473.355, 'text': "In this case, I'm going to call it AngularFS or Angular Firestore.", 'start': 469.493, 'duration': 3.862}, {'end': 480.263, 'text': 'And that will generate the folder and all of the main Angular files.', 'start': 474.501, 'duration': 5.762}], 'summary': 'Creating a new angular application using ng new command to generate files.', 'duration': 31.219, 'max_score': 449.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w449044.jpg'}, {'end': 592.75, 'src': 'embed', 'start': 566.61, 'weight': 6, 'content': [{'end': 570.592, 'text': "We're going to need jQuery because it's a dependency of Materialize.", 'start': 566.61, 'duration': 3.982}, {'end': 574.174, 'text': "And then I'm also going to use Font Awesome, which is an icon library.", 'start': 571.032, 'duration': 3.142}, {'end': 575.855, 'text': "So let's install those with npm.", 'start': 574.234, 'duration': 1.621}, {'end': 579.381, 'text': "so we'll say npm install now.", 'start': 577.239, 'duration': 2.142}, {'end': 583.604, 'text': "if you're using npm version 5 or later, you don't have to do dash.", 'start': 579.381, 'duration': 4.223}, {'end': 592.75, 'text': 'dash save in order to save your dependencies to your package.json file, but I usually use it just in case, especially where I do videos,', 'start': 583.604, 'duration': 9.146}], 'summary': 'Installing jquery and font awesome using npm for materialize dependency.', 'duration': 26.14, 'max_score': 566.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w566610.jpg'}, {'end': 652.593, 'src': 'embed', 'start': 619.7, 'weight': 4, 'content': [{'end': 621.481, 'text': "There's two other things we need to install.", 'start': 619.7, 'duration': 1.781}, {'end': 634.643, 'text': 'And that is Firebase, the Firebase module itself, and then AngularFire2, which is the connector between Angular and Firebase.', 'start': 624.497, 'duration': 10.146}, {'end': 636.504, 'text': 'So we need both of those installed.', 'start': 634.743, 'duration': 1.761}, {'end': 640.386, 'text': 'And AngularFire2 is very, very powerful.', 'start': 638.265, 'duration': 2.121}, {'end': 643.108, 'text': 'We can do authentication.', 'start': 641.747, 'duration': 1.361}, {'end': 652.593, 'text': 'We can do real-time databases, Firestore, basically anything to do with Firebase, storage, file storage, all that.', 'start': 643.148, 'duration': 9.445}], 'summary': 'Install firebase and angularfire2 for powerful features like authentication and real-time databases.', 'duration': 32.893, 'max_score': 619.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w619700.jpg'}], 'start': 196.067, 'title': 'Setting up firestore in firebase and angular application', 'summary': 'Explains setting up firestore in firebase, covering creating a new project, enabling firestore, adding data, and setting up an angular application with firebase and firestore. it emphasizes the ease of interface, flexibility of firestore, and the use of angular fire 2, angular cli, and relevant dependencies like materialize css, jquery, font awesome, firebase, and angularfire2.', 'chapters': [{'end': 374.013, 'start': 196.067, 'title': 'Setting up firestore in firebase', 'summary': 'Explains how to set up firestore in firebase, including creating a new project, enabling firestore, and adding data, emphasizing the ease of interface and the flexibility of using firestore instead of the real-time database.', 'duration': 177.946, 'highlights': ["The chapter walks through creating a new project called 'FS1 prod' for production, highlighting the ease of project creation in Firebase.", 'It details the process of enabling Firestore instead of the real-time database, emphasizing the flexibility of using Firestore for data storage.', 'The interface provided by Firestore for adding data is emphasized as a highlight, showcasing the ease of adding data compared to using custom JSON in the real-time database.']}, {'end': 652.593, 'start': 374.073, 'title': 'Setting up angular application with firebase and firestore', 'summary': 'Covers setting up an angular application with firebase and firestore, emphasizing the use of angular fire 2, generating the application with angular cli, and installing relevant dependencies such as materialize css, jquery, font awesome, firebase, and angularfire2.', 'duration': 278.52, 'highlights': ['The chapter emphasizes the use of Angular Fire 2 for interacting with Firebase or Firestore, choosing to create a service for expandability across components rather than bringing in what is needed from Angular Fire in every single component. Angular Fire 2 is highlighted as the main module for interacting with Firebase or Firestore, and the decision to create a service for expandability across components is emphasized, promoting efficiency.', "The process of generating the Angular application with the Angular CLI is detailed, including the command 'ng new' followed by the application name, leading to the creation of the necessary folder and main Angular files. The detailed process of generating the Angular application with the Angular CLI is outlined, emphasizing the use of the 'ng new' command and its outcome in creating the required folder and main Angular files.", "The installation of front-end dependencies such as Materialize CSS, jQuery, and Font Awesome is explained using 'npm install', with a note about using '--save' for npm versions 5 or later. The explanation of installing front-end dependencies including Materialize CSS, jQuery, and Font Awesome using 'npm install' is provided, with a note about '--save' for npm versions 5 or later.", 'The need to install Firebase and AngularFire2 modules is highlighted, emphasizing the powerful capabilities of AngularFire2 for authentication, real-time databases, Firestore, and Firebase-related functionalities. The importance of installing Firebase and AngularFire2 modules is emphasized, highlighting the powerful capabilities of AngularFire2 for various functionalities related to Firebase, including authentication and real-time databases.']}], 'duration': 456.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w196067.jpg', 'highlights': ["The chapter walks through creating a new project called 'FS1 prod' for production, highlighting the ease of project creation in Firebase.", 'The interface provided by Firestore for adding data is emphasized as a highlight, showcasing the ease of adding data compared to using custom JSON in the real-time database.', 'It details the process of enabling Firestore instead of the real-time database, emphasizing the flexibility of using Firestore for data storage.', 'The chapter emphasizes the use of Angular Fire 2 for interacting with Firebase or Firestore, choosing to create a service for expandability across components rather than bringing in what is needed from Angular Fire in every single component.', 'The need to install Firebase and AngularFire2 modules is highlighted, emphasizing the powerful capabilities of AngularFire2 for authentication, real-time databases, Firestore, and Firebase-related functionalities.', "The process of generating the Angular application with the Angular CLI is detailed, including the command 'ng new' followed by the application name, leading to the creation of the necessary folder and main Angular files.", "The installation of front-end dependencies such as Materialize CSS, jQuery, and Font Awesome is explained using 'npm install', with a note about using '--save' for npm versions 5 or later."]}, {'end': 1053.278, 'segs': [{'end': 704.735, 'src': 'embed', 'start': 678.101, 'weight': 0, 'content': [{'end': 681.562, 'text': "and we're going to put them into the angular-cli.json file.", 'start': 678.101, 'duration': 3.461}, {'end': 684.703, 'text': "Okay, there's a place for styles and for scripts.", 'start': 681.582, 'duration': 3.121}, {'end': 688.505, 'text': "And as you can see, there's a default style sheet included with Angular.", 'start': 685.183, 'duration': 3.322}, {'end': 692.006, 'text': "That's actually the source assets.", 'start': 688.925, 'duration': 3.081}, {'end': 694.227, 'text': 'Oh, where is it? Right here, styles.css.', 'start': 692.626, 'duration': 1.601}, {'end': 697.269, 'text': 'so it includes that.', 'start': 695.507, 'duration': 1.762}, {'end': 704.735, 'text': "in addition to that, we're going to put a comma and we're going to include font awesome, which is going to be dot dot slash,", 'start': 697.269, 'duration': 7.466}], 'summary': 'Adding default stylesheet and font awesome to angular-cli.json.', 'duration': 26.634, 'max_score': 678.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w678101.jpg'}, {'end': 867.963, 'src': 'embed', 'start': 840.931, 'weight': 2, 'content': [{'end': 846.953, 'text': "But basically, we're going to go into the source folder, and then app, and then app.module.ts.", 'start': 840.931, 'duration': 6.022}, {'end': 850.395, 'text': 'So this is basically like a meeting place for everything.', 'start': 847.514, 'duration': 2.881}, {'end': 855.817, 'text': 'Any component you create, any service, any module you bring in has to go into this file.', 'start': 850.435, 'duration': 5.382}, {'end': 861.898, 'text': "All right, and then it has to be imported and put into where it's supposed to go in ng module.", 'start': 856.398, 'duration': 5.5}, {'end': 864.88, 'text': 'For example, components go into declarations.', 'start': 862.298, 'duration': 2.582}, {'end': 867.963, 'text': 'When we create a service, that goes into providers.', 'start': 865.281, 'duration': 2.682}], 'summary': "The app.module.ts serves as a meeting place for all components, services, and modules in the source folder, with components going into 'declarations' and services into 'providers'.", 'duration': 27.032, 'max_score': 840.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w840931.jpg'}, {'end': 928.28, 'src': 'embed', 'start': 893.824, 'weight': 3, 'content': [{'end': 896.226, 'text': "We've already done that and All right.", 'start': 893.824, 'duration': 2.402}, {'end': 905.529, 'text': 'so right here now, in order to basically link our fire store with our application, We need to include this object here with the API key,', 'start': 896.226, 'duration': 9.303}, {'end': 911.091, 'text': 'the auth domain, all this stuff, And they recommend putting it in your environment TS file.', 'start': 905.529, 'duration': 5.562}, {'end': 921.234, 'text': "so what we're going to do is go into environments and then environment TS and we're going to inside of this const environment.", 'start': 911.091, 'duration': 10.143}, {'end': 928.28, 'text': "let's put a comma right here and we'll say I Firebase and that's going to be an object.", 'start': 921.234, 'duration': 7.046}], 'summary': 'Link firestore with application by including api key and auth domain in environment ts file.', 'duration': 34.456, 'max_score': 893.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w893824.jpg'}, {'end': 1036.406, 'src': 'embed', 'start': 1000.903, 'weight': 4, 'content': [{'end': 1003.924, 'text': 'And you can either go you can copy it from here or you can just type it in.', 'start': 1000.903, 'duration': 3.021}, {'end': 1009.425, 'text': 'Now this is just Angular Fire itself.', 'start': 1006.983, 'duration': 2.442}, {'end': 1017.232, 'text': "We're also using Firestore, and there's a separate module we need to import, which is Angular Firestore module.", 'start': 1009.485, 'duration': 7.747}, {'end': 1018.774, 'text': "So let's do that as well.", 'start': 1017.272, 'duration': 1.502}, {'end': 1030.144, 'text': "So import Angular Firestore module, and that's going to be from.", 'start': 1019.574, 'duration': 10.57}, {'end': 1036.406, 'text': 'Angular Fire 2 slash Firestore.', 'start': 1032.401, 'duration': 4.005}], 'summary': 'Using angular fire and firestore module for importing in the code.', 'duration': 35.503, 'max_score': 1000.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1000903.jpg'}], 'start': 653.356, 'title': 'Angular setup and configuration', 'summary': 'Discusses setting up dependencies in angular cli, including libraries like materialize, jquery, and font-awesome in angular-cli.json, and configuring angular 4 to include components, services, and modules while integrating firestore with api key and environment settings.', 'chapters': [{'end': 816.753, 'start': 653.356, 'title': 'Setting up dependencies in angular cli', 'summary': "Discusses adding external libraries such as materialize, jquery, and font-awesome to the angular-cli.json file, including the specific file paths and commands for inclusion, followed by running 'ng serve' to ensure the scripts are included.", 'duration': 163.397, 'highlights': ["The chapter explains the process of adding external libraries such as materialize, jQuery, and font-awesome to the angular-cli.json file, providing specific file paths for inclusion, using commands like 'code dot' to open the folder in VS Code, and running 'ng serve' to ensure the scripts are included.", 'It details the specific file paths for including font awesome, materialize CSS, jQuery, and materialize javascript in the angular-cli.json file, specifying the locations within the node modules folder and the commands for inclusion.']}, {'end': 1053.278, 'start': 816.753, 'title': 'Angular 4 setup and configuration', 'summary': 'Covers setting up angular 4, configuring app.module.ts to include components, services, and modules, and integrating firestore with the application by including api key and environment settings.', 'duration': 236.525, 'highlights': ['Configuring app.module.ts Explains the purpose of app.module.ts as a central location for components, services, and modules, and the process of importing and placing them in ng module.', 'Integrating Firestore with the application Demonstrates the process of including API key and environment settings from Firestore into the application, emphasizing the importance of using own information.', 'Importing required modules Describes the process of importing Angular Fire module and Angular Firestore module to enable the use of Firestore in the application.', 'Basic setup and Angular fundamentals Mentions the importance of having basic knowledge of Angular 4 or 2 or 5, and redirects beginners to a tutorial for the basics.', 'Avoiding missing jQuery or errors Emphasizes the importance of ensuring the absence of missing jQuery or any errors in the setup process.']}], 'duration': 399.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w653356.jpg', 'highlights': ["The chapter explains the process of adding external libraries such as materialize, jQuery, and font-awesome to the angular-cli.json file, providing specific file paths for inclusion, using commands like 'code dot' to open the folder in VS Code, and running 'ng serve' to ensure the scripts are included.", 'It details the specific file paths for including font awesome, materialize CSS, jQuery, and materialize javascript in the angular-cli.json file, specifying the locations within the node modules folder and the commands for inclusion.', 'Configuring app.module.ts Explains the purpose of app.module.ts as a central location for components, services, and modules, and the process of importing and placing them in ng module.', 'Integrating Firestore with the application Demonstrates the process of including API key and environment settings from Firestore into the application, emphasizing the importance of using own information.', 'Importing required modules Describes the process of importing Angular Fire module and Angular Firestore module to enable the use of Firestore in the application.']}, {'end': 1558.39, 'segs': [{'end': 1116.875, 'src': 'embed', 'start': 1053.318, 'weight': 1, 'content': [{'end': 1065.726, 'text': "We'll go back here and you can see that they're adding AngularFireModule.InitializeApp to the imports and then they're passing in that Firebase object from the environment file that we put in.", 'start': 1053.318, 'duration': 12.408}, {'end': 1067.147, 'text': "So let's go ahead and do that.", 'start': 1065.846, 'duration': 1.301}, {'end': 1071.89, 'text': "So in the imports, we'll put a comma here, and we'll say..", 'start': 1067.647, 'duration': 4.243}, {'end': 1079.516, 'text': 'AngularFireModule And then we want to call initializeApp.', 'start': 1075.315, 'duration': 4.201}, {'end': 1085.078, 'text': 'And we want to pass in environment.firebase.', 'start': 1079.916, 'duration': 5.162}, {'end': 1090.94, 'text': 'And then a second parameter of the app name, which is, in this case, AngularFS.', 'start': 1086.698, 'duration': 4.242}, {'end': 1096.19, 'text': "okay, so that'll import.", 'start': 1093.669, 'duration': 2.521}, {'end': 1100.471, 'text': "uh, firebase and you know everything that's needed.", 'start': 1096.19, 'duration': 4.281}, {'end': 1105.932, 'text': 'so we also want to bring the angular fire store module into the imports.', 'start': 1100.471, 'duration': 5.461}, {'end': 1116.875, 'text': "so we'll put a comma here and we'll say angular fire store module, okay, just that we don't have to add any extra method or anything like that.", 'start': 1105.932, 'duration': 10.943}], 'summary': 'Adding angularfiremodule.initializeapp and angularfirestoremodule to imports with environment.firebase.', 'duration': 63.557, 'max_score': 1053.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1053318.jpg'}, {'end': 1163.081, 'src': 'embed', 'start': 1138.569, 'weight': 0, 'content': [{'end': 1145.794, 'text': "this is our main app component, and then we have our html app.component.html file, which is what you're looking at right here.", 'start': 1138.569, 'duration': 7.225}, {'end': 1147.816, 'text': "so i'm going to clear all this stuff out.", 'start': 1145.794, 'duration': 2.022}, {'end': 1149.497, 'text': "we don't need any of this.", 'start': 1147.816, 'duration': 1.681}, {'end': 1154.16, 'text': "so we'll get rid of it and save and you can see that it'll just auto upload or auto load.", 'start': 1149.497, 'duration': 4.663}, {'end': 1161.26, 'text': "Okay, now we're going to need a component to display our items from Firebase or from Firestore.", 'start': 1155.137, 'duration': 6.123}, {'end': 1163.081, 'text': "So let's let's generate a component.", 'start': 1161.32, 'duration': 1.761}], 'summary': 'Developing main app component, clearing unnecessary content, and generating a component to display items from firebase or firestore.', 'duration': 24.512, 'max_score': 1138.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1138569.jpg'}, {'end': 1323.809, 'src': 'embed', 'start': 1300.132, 'weight': 4, 'content': [{'end': 1308.398, 'text': 'And then that generates a folder called services with a file called item.service.ts, and it gives us a class of item service.', 'start': 1300.132, 'duration': 8.266}, {'end': 1315.864, 'text': "All right, so this is where we're going to basically do all of our interaction with Firebase using AngularFire.", 'start': 1308.999, 'duration': 6.865}, {'end': 1323.809, 'text': 'Now, when you create a service or anything, as I said before, it has to go into the app.module.ts file.', 'start': 1317.205, 'duration': 6.604}], 'summary': 'Generating a services folder with item.service.ts for firebase interaction using angularfire, to be included in app.module.ts.', 'duration': 23.677, 'max_score': 1300.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1300132.jpg'}, {'end': 1405.666, 'src': 'embed', 'start': 1377.716, 'weight': 5, 'content': [{'end': 1381.2, 'text': "So there's a couple things we need to import from AngularFire.", 'start': 1377.716, 'duration': 3.484}, {'end': 1387.326, 'text': 'All right, so one is the basic AngularFireStore.', 'start': 1382.061, 'duration': 5.265}, {'end': 1392.212, 'text': 'All right, the next is going to be the AngularFireStoreCollection.', 'start': 1387.347, 'duration': 4.865}, {'end': 1399.002, 'text': 'which represents collections.', 'start': 1397.621, 'duration': 1.381}, {'end': 1402.084, 'text': 'In our case, we only have one collection, which is item.', 'start': 1399.042, 'duration': 3.042}, {'end': 1405.666, 'text': 'And then also something called Angular Firestore document.', 'start': 1402.524, 'duration': 3.142}], 'summary': "Import angularfire modules for angularfirestore, angularfirestorecollection, and angular firestore document to manage a single 'item' collection.", 'duration': 27.95, 'max_score': 1377.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1377716.jpg'}, {'end': 1512.942, 'src': 'embed', 'start': 1478.63, 'weight': 3, 'content': [{'end': 1484.075, 'text': 'we have to inject that as a dependency into the constructor so that we can use it within our service.', 'start': 1478.63, 'duration': 5.445}, {'end': 1488.859, 'text': "So we're going to say public, and then we can call it whatever we want right here.", 'start': 1484.716, 'duration': 4.143}, {'end': 1495.005, 'text': "I'm going to call it AFS, and then just set it to Angular Firestore.", 'start': 1488.879, 'duration': 6.126}, {'end': 1499.417, 'text': "Okay. And then let's see,", 'start': 1496.576, 'duration': 2.841}, {'end': 1512.942, 'text': "we're going to add a property up here and we're going to add a property of items collection and we're going to set that to angular fire store collection.", 'start': 1499.417, 'duration': 13.525}], 'summary': 'Inject angular firestore as a dependency into the constructor, set property items collection to angular firestore collection.', 'duration': 34.312, 'max_score': 1478.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1478630.jpg'}], 'start': 1053.318, 'title': 'Integrating angularfiremodule and item service in angularfs', 'summary': 'Covers integrating angularfiremodule in angularfs, including adding angularfiremodule.initializeapp, bringing the angular fire store module into the imports, and generating a component for items. additionally, it covers the process of generating and integrating an item service to interact with firebase using angularfire, including importing necessary modules and setting up dependencies within the service.', 'chapters': [{'end': 1270.304, 'start': 1053.318, 'title': 'Integrating angularfiremodule in angularfs', 'summary': 'Covers integrating angularfiremodule in angularfs, including adding angularfiremodule.initializeapp to the imports, bringing the angular fire store module into the imports, and generating and displaying a component for items.', 'duration': 216.986, 'highlights': ['Adding AngularFireModule.InitializeApp to the imports and passing in the Firebase object from the environment file This step is crucial for integrating AngularFireModule in AngularFS, allowing the application to access Firebase functionalities and resources.', 'Bringing the angular fire store module into the imports Including the angular fire store module in the imports ensures that the application can utilize Firestore functionalities for storing and retrieving data.', 'Generating a component for items and displaying it in the main app component Creating and displaying a component for items enables the application to present items from Firebase or Firestore, enhancing the functionality and user experience.']}, {'end': 1558.39, 'start': 1270.804, 'title': 'Creating item service for firebase interaction', 'summary': 'Covers the process of generating and integrating an item service to interact with firebase using angularfire, including importing necessary modules and setting up dependencies within the service.', 'duration': 287.586, 'highlights': ['Generate a service called item service and integrate it into app.module.ts for Firebase interaction using AngularFire. The chapter explains the generation of the item service and its integration into app.module.ts for Firebase interaction using AngularFire.', 'Import necessary modules such as AngularFireStore, AngularFireStoreCollection, and AngularFirestoreDocument for interacting with Firestore. The chapter discusses the need to import necessary modules like AngularFireStore, AngularFireStoreCollection, and AngularFirestoreDocument for interacting with Firestore.', 'Inject Angular Firestore as a dependency into the constructor of the service to utilize it within the service. It explains the process of injecting Angular Firestore as a dependency into the constructor of the service to utilize it within the service.']}], 'duration': 505.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1053318.jpg', 'highlights': ['Generating a component for items and displaying it in the main app component Creating and displaying a component for items enables the application to present items from Firebase or Firestore, enhancing the functionality and user experience.', 'Bringing the angular fire store module into the imports Including the angular fire store module in the imports ensures that the application can utilize Firestore functionalities for storing and retrieving data.', 'Adding AngularFireModule.InitializeApp to the imports and passing in the Firebase object from the environment file This step is crucial for integrating AngularFireModule in AngularFS, allowing the application to access Firebase functionalities and resources.', 'Inject Angular Firestore as a dependency into the constructor of the service to utilize it within the service. It explains the process of injecting Angular Firestore as a dependency into the constructor of the service to utilize it within the service.', 'Generate a service called item service and integrate it into app.module.ts for Firebase interaction using AngularFire. The chapter explains the generation of the item service and its integration into app.module.ts for Firebase interaction using AngularFire.', 'Import necessary modules such as AngularFireStore, AngularFireStoreCollection, and AngularFirestoreDocument for interacting with Firestore. The chapter discusses the need to import necessary modules like AngularFireStore, AngularFireStoreCollection, and AngularFirestoreDocument for interacting with Firestore.']}, {'end': 1903.426, 'segs': [{'end': 1586.722, 'src': 'embed', 'start': 1558.39, 'weight': 0, 'content': [{'end': 1563.596, 'text': "I don't want to do that, because I'm going to be using this interface in multiple places and other components and stuff.", 'start': 1558.39, 'duration': 5.206}, {'end': 1574.517, 'text': "So what I'm going to do is in the app folder, we're going to create a folder called models And inside models, we'll create a file called item.ts.", 'start': 1564.016, 'duration': 10.501}, {'end': 1581.32, 'text': "And then we're just going to grab that interface, cut it,", 'start': 1576.118, 'duration': 5.202}, {'end': 1586.722, 'text': 'put it in there and then just put export in front of it so that it can be used outside of this file.', 'start': 1581.32, 'duration': 5.402}], 'summary': 'Moving interface to models/item.ts in app folder for reusability.', 'duration': 28.332, 'max_score': 1558.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1558390.jpg'}, {'end': 1609.731, 'src': 'heatmap', 'start': 1558.39, 'weight': 0.824, 'content': [{'end': 1563.596, 'text': "I don't want to do that, because I'm going to be using this interface in multiple places and other components and stuff.", 'start': 1558.39, 'duration': 5.206}, {'end': 1574.517, 'text': "So what I'm going to do is in the app folder, we're going to create a folder called models And inside models, we'll create a file called item.ts.", 'start': 1564.016, 'duration': 10.501}, {'end': 1581.32, 'text': "And then we're just going to grab that interface, cut it,", 'start': 1576.118, 'duration': 5.202}, {'end': 1586.722, 'text': 'put it in there and then just put export in front of it so that it can be used outside of this file.', 'start': 1581.32, 'duration': 5.402}, {'end': 1589.843, 'text': 'So then we can just import it into our service.', 'start': 1587.302, 'duration': 2.541}, {'end': 1599.006, 'text': "So we can say import item from, and it's going to be dot dot slash models.", 'start': 1591.023, 'duration': 7.983}, {'end': 1601.987, 'text': 'slash item.', 'start': 1600.866, 'duration': 1.121}, {'end': 1609.731, 'text': 'okay, so now it knows what this item is and we can now use it in other files as well.', 'start': 1601.987, 'duration': 7.744}], 'summary': "Creating a reusable interface 'item.ts' in 'models' folder for use in multiple places.", 'duration': 51.341, 'max_score': 1558.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1558390.jpg'}, {'end': 1642.22, 'src': 'embed', 'start': 1609.731, 'weight': 3, 'content': [{'end': 1615.614, 'text': 'okay, so items collection we have set to the angular firestore collection with the type of item.', 'start': 1609.731, 'duration': 5.883}, {'end': 1620.537, 'text': "then we're also going to have a property called items and this is going to be an observable.", 'start': 1615.614, 'duration': 4.923}, {'end': 1626.86, 'text': 'so we need to actually bring in the observable package from reactive extensions.', 'start': 1620.537, 'duration': 6.323}, {'end': 1642.22, 'text': "so let's say import observable from Reactive Extensions, which is rxjs, slash observable.", 'start': 1626.86, 'duration': 15.36}], 'summary': 'Setting up angular firestore collection with item type and importing observable from rxjs.', 'duration': 32.489, 'max_score': 1609.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1609731.jpg'}, {'end': 1738.404, 'src': 'embed', 'start': 1710.749, 'weight': 4, 'content': [{'end': 1714.212, 'text': "So there's multiple ways of streaming collection data from your Firestore.", 'start': 1710.749, 'duration': 3.463}, {'end': 1716.134, 'text': 'Value changes is one of them.', 'start': 1714.652, 'duration': 1.482}, {'end': 1725.08, 'text': 'observable data synchronized array of Jason objects.', 'start': 1719.358, 'duration': 5.722}, {'end': 1731.922, 'text': "but the thing is with this with value changes, it doesn't give you the ID and we're gonna need the ID.", 'start': 1725.08, 'duration': 6.842}, {'end': 1738.404, 'text': "so later on we're actually gonna change it to snapshot changes, which does include the ID.", 'start': 1731.922, 'duration': 6.482}], 'summary': 'Firestore offers multiple ways to stream collection data, including value changes and snapshot changes. snapshot changes provides the necessary ids for data.', 'duration': 27.655, 'max_score': 1710.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1710749.jpg'}, {'end': 1799.29, 'src': 'heatmap', 'start': 1771.397, 'weight': 0.759, 'content': [{'end': 1781.361, 'text': 'the items collection dot value changes, which will send it as an observable, which is like a data stream, and then get items is just returning.', 'start': 1771.397, 'duration': 9.964}, {'end': 1782.802, 'text': 'that okay.', 'start': 1781.361, 'duration': 1.441}, {'end': 1783.262, 'text': "so we're.", 'start': 1782.802, 'duration': 0.46}, {'end': 1784.623, 'text': "this is all we're going to do for now.", 'start': 1783.262, 'duration': 1.361}, {'end': 1789.045, 'text': "we'll save it and then we're going to go into our items component.", 'start': 1784.623, 'duration': 4.422}, {'end': 1793.947, 'text': "so it's going to component items, component ts.", 'start': 1789.045, 'duration': 4.902}, {'end': 1799.29, 'text': 'in order to use any of those service functions or service methods, we need to import the service.', 'start': 1793.947, 'duration': 5.343}], 'summary': 'The transcript discusses sending changes as an observable and importing service methods.', 'duration': 27.893, 'max_score': 1771.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1771397.jpg'}, {'end': 1877.841, 'src': 'embed', 'start': 1853.455, 'weight': 5, 'content': [{'end': 1859.717, 'text': 'so now what we want to do is we want to fetch our items through the service using this getItems right here.', 'start': 1853.455, 'duration': 6.262}, {'end': 1867.579, 'text': 'So ngOnInit is a lifecycle method that runs automatically when your component is generated.', 'start': 1860.277, 'duration': 7.302}, {'end': 1870.839, 'text': "So just to show you that, I'm going to just console.log.", 'start': 1867.699, 'duration': 3.14}, {'end': 1875.56, 'text': "And let's just say ngOnInit ran.", 'start': 1871.659, 'duration': 3.901}, {'end': 1877.841, 'text': "And we'll save that.", 'start': 1875.58, 'duration': 2.261}], 'summary': 'Demonstrating the use of ngoninit lifecycle method for fetching items through a service.', 'duration': 24.386, 'max_score': 1853.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1853455.jpg'}], 'start': 1558.39, 'title': 'Angular app refactoring, firestore setup, and service methods', 'summary': 'Covers refactoring an interface for reusability, setting up firestore collection with observable for data streaming, and creating service method for automatic data initialization.', 'chapters': [{'end': 1609.731, 'start': 1558.39, 'title': 'Interface refactoring in angular app', 'summary': 'Discusses refactoring an interface in an angular app to be used in multiple places, by creating a folder called models and moving the interface definition into a separate file for reusability and then importing it into other components.', 'duration': 51.341, 'highlights': ['Creating a separate folder called models to hold the interface file for reusability and maintenance.', 'Moving the interface definition into a separate file named item.ts to organize the code and improve readability.', 'Importing the interface into other components for reuse and modularity.']}, {'end': 1738.404, 'start': 1609.731, 'title': 'Angular firestore collection setup', 'summary': 'Discusses setting up an angular firestore collection, initializing an observable for items, and using value changes to stream collection data, highlighting the need to switch to snapshot changes for including ids in the data.', 'duration': 128.673, 'highlights': ['The chapter explains setting the items collection as an Angular Firestore collection and initializing it as an observable.', 'It mentions the use of value changes to stream collection data, specifying that it returns an observable data synchronized array of JSON objects.', 'The chapter highlights the need to switch from value changes to snapshot changes as the former does not include the ID in the data.']}, {'end': 1903.426, 'start': 1738.404, 'title': 'Angular service methods', 'summary': "Explains the creation of a method 'getitems' to fetch items through the service and its automatic execution using the lifecycle method 'ngoninit' to initialize data.", 'duration': 165.022, 'highlights': ["A method 'getItems' is created to fetch items through the service and is automatically executed using the lifecycle method 'ngOnInit' for data initialization.", "The 'ngOnInit' lifecycle method automatically runs when the component is generated, serving as a point for initializations like fetching data."]}], 'duration': 345.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1558390.jpg', 'highlights': ['Creating a separate folder called models to hold the interface file for reusability and maintenance.', 'Moving the interface definition into a separate file named item.ts to organize the code and improve readability.', 'Importing the interface into other components for reuse and modularity.', 'The chapter explains setting the items collection as an Angular Firestore collection and initializing it as an observable.', 'The chapter highlights the need to switch from value changes to snapshot changes as the former does not include the ID in the data.', "A method 'getItems' is created to fetch items through the service and is automatically executed using the lifecycle method 'ngOnInit' for data initialization.", "The 'ngOnInit' lifecycle method automatically runs when the component is generated, serving as a point for initializations like fetching data."]}, {'end': 2397.683, 'segs': [{'end': 1982.36, 'src': 'heatmap', 'start': 1917.339, 'weight': 0, 'content': [{'end': 1929.411, 'text': "so let's go back and let's say this dot, item, service dot, get items, and then we need to subscribe,", 'start': 1917.339, 'duration': 12.072}, {'end': 1935.018, 'text': 'And inside this subscribe we can put whatever we want here.', 'start': 1931.656, 'duration': 3.362}, {'end': 1938.66, 'text': "I'm going to call it items because that's what it's going to give us.", 'start': 1935.038, 'duration': 3.622}, {'end': 1941.602, 'text': 'Set it to a set of curly braces.', 'start': 1939.541, 'duration': 2.061}, {'end': 1945.324, 'text': "And let's just console.log the items.", 'start': 1942.322, 'duration': 3.002}, {'end': 1949.266, 'text': "Okay, and we'll go back here.", 'start': 1945.344, 'duration': 3.922}, {'end': 1955.67, 'text': "And if we look down here at what's logged, you'll see we're actually fetching the data from the Firestore.", 'start': 1949.666, 'duration': 6.004}, {'end': 1957.251, 'text': 'We have item one and item two.', 'start': 1955.79, 'duration': 1.461}, {'end': 1961.861, 'text': "I know that's kind of difficult to follow along with.", 'start': 1959.38, 'duration': 2.481}, {'end': 1966.503, 'text': "Those of you that have taken my Angular 4 course, I know you know exactly what's going on.", 'start': 1962.341, 'duration': 4.162}, {'end': 1972.925, 'text': "But those of you that haven't, we're just fetching data through the service using Angular Fire.", 'start': 1967.303, 'duration': 5.622}, {'end': 1980.667, 'text': "We're returning the items as an observable and then we're subscribing to them in our component and just logging them.", 'start': 1973.805, 'duration': 6.862}, {'end': 1982.36, 'text': 'right now.', 'start': 1981.579, 'duration': 0.781}], 'summary': 'Fetching data from firestore using angular fire, returning items as an observable, and subscribing to them in the component.', 'duration': 47.322, 'max_score': 1917.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1917339.jpg'}, {'end': 2092.021, 'src': 'embed', 'start': 2065.138, 'weight': 5, 'content': [{'end': 2068.359, 'text': "Now, since it's an array, what we want to do is we want to loop through it.", 'start': 2065.138, 'duration': 3.221}, {'end': 2072.46, 'text': 'We can do that using the Angular NG4 directive.', 'start': 2069.06, 'duration': 3.4}, {'end': 2076.661, 'text': "So, let's go to our HTML, items.component.html.", 'start': 2073.101, 'duration': 3.56}, {'end': 2081.464, 'text': "We're going to get rid of this, and then we're going to put a div here.", 'start': 2077.822, 'duration': 3.642}, {'end': 2087.078, 'text': 'And then I just want to check to see if there actually are any items.', 'start': 2083.094, 'duration': 3.984}, {'end': 2089.899, 'text': 'Because if there are not, then I want to do something different.', 'start': 2087.158, 'duration': 2.741}, {'end': 2092.021, 'text': "I want to say basically there's no items.", 'start': 2089.918, 'duration': 2.103}], 'summary': 'Using angular ng4 directive to loop through an array in items.component.html.', 'duration': 26.883, 'max_score': 2065.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w2065138.jpg'}, {'end': 2391.036, 'src': 'embed', 'start': 2359.108, 'weight': 3, 'content': [{'end': 2361.009, 'text': 'creating our service and all that stuff.', 'start': 2359.108, 'duration': 1.901}, {'end': 2365.212, 'text': "Now, one issue we do have is we don't have the ID.", 'start': 2361.95, 'duration': 3.262}, {'end': 2373.279, 'text': "If I were to change item.title to item.id and save, you'll see it's not going to give it to us.", 'start': 2365.253, 'duration': 8.026}, {'end': 2380.225, 'text': 'In order to get the ID, we have to use instead of value changes, we have to use snapshot changes.', 'start': 2374.28, 'duration': 5.945}, {'end': 2382.967, 'text': 'And then we also have to add some other stuff.', 'start': 2380.825, 'duration': 2.142}, {'end': 2391.036, 'text': "We have to add a map, and then we have to do this stuff here to get the ID, which is a little confusing, but I'll show you how to do that.", 'start': 2383.388, 'duration': 7.648}], 'summary': 'Struggling to retrieve ids, must switch to snapshot changes for solution.', 'duration': 31.928, 'max_score': 2359.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w2359108.jpg'}], 'start': 1903.426, 'title': 'Angular firestore data fetching and items handling', 'summary': 'Demonstrates fetching data from firestore using angular fire, subscribing to an observable to retrieve items, and logging the fetched data. it also explains how to fetch and display items using angular and firebase, including setting items as a property, looping through items, handling no items scenario, and fetching data from firestore, with the mention of the need for id handling.', 'chapters': [{'end': 1982.36, 'start': 1903.426, 'title': 'Angular firestore data fetching', 'summary': 'Demonstrates fetching data from firestore using angular fire, subscribing to an observable to retrieve items, and logging the fetched data, showcasing item one and item two being fetched.', 'duration': 78.934, 'highlights': ['Subscribing to an observable using value changes in Angular Fire to retrieve items from Firestore, followed by subscribing to it in the component and logging the fetched data.', 'Demonstrating the process of fetching data through the service using Angular Fire and returning the items as an observable.', 'Logging the fetched data, showcasing the presence of item one and item two.']}, {'end': 2397.683, 'start': 1982.36, 'title': 'Angular items handling', 'summary': 'Explains how to fetch and display items using angular and firebase, including setting items as a property, looping through items, handling no items scenario, and fetching data from firestore, with a mention of the need for id handling.', 'duration': 415.323, 'highlights': ['Explaining how to fetch and display items using Angular and Firebase Setting items as a property, looping through items, handling no items scenario, and fetching data from Firestore', 'Demonstrating the use of NG4 directive to loop through items and handle the no items scenario Using Angular NG4 directive to loop through items, handling no items scenario using ng if and ngTemplate', 'Mentioning the need for ID handling when fetching data from Firestore Highlighting the issue of missing ID when fetching data and the need for using snapshot changes and map to handle it']}], 'duration': 494.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gUmItHaVL2w/pics/gUmItHaVL2w1903426.jpg', 'highlights': ['Subscribing to an observable using value changes in Angular Fire to retrieve items from Firestore, followed by subscribing to it in the component and logging the fetched data.', 'Explaining how to fetch and display items using Angular and Firebase Setting items as a property, looping through items, handling no items scenario, and fetching data from Firestore', 'Demonstrating the process of fetching data through the service using Angular Fire and returning the items as an observable.', 'Mentioning the need for ID handling when fetching data from Firestore Highlighting the issue of missing ID when fetching data and the need for using snapshot changes and map to handle it', 'Logging the fetched data, showcasing the presence of item one and item two.', 'Demonstrating the use of NG4 directive to loop through items and handle the no items scenario Using Angular NG4 directive to loop through items, handling no items scenario using ng if and ngTemplate']}], 'highlights': ['Firestore Cloud Platform from Firebase provides scalable and fast storage, sync, and query capabilities for web and mobile applications.', 'The chapter demonstrates building a real-time item manager using Firestore, Angular 4, and Materialize CSS.', 'Users can add, update, and delete items with real-time updates in the Firestore backend.', 'The need to install Firebase and AngularFire2 modules is highlighted, emphasizing the powerful capabilities of AngularFire2 for authentication, real-time databases, Firestore, and Firebase-related functionalities.', "The installation of front-end dependencies such as Materialize CSS, jQuery, and Font Awesome is explained using 'npm install', with a note about using '--save' for npm versions 5 or later.", 'Configuring app.module.ts Explains the purpose of app.module.ts as a central location for components, services, and modules, and the process of importing and placing them in ng module.', 'Integrating Firestore with the application Demonstrates the process of including API key and environment settings from Firestore into the application, emphasizing the importance of using own information.', 'Generating a component for items and displaying it in the main app component Creating and displaying a component for items enables the application to present items from Firebase or Firestore, enhancing the functionality and user experience.', 'Bringing the angular fire store module into the imports Including the angular fire store module in the imports ensures that the application can utilize Firestore functionalities for storing and retrieving data.', 'Adding AngularFireModule.InitializeApp to the imports and passing in the Firebase object from the environment file This step is crucial for integrating AngularFireModule in AngularFS, allowing the application to access Firebase functionalities and resources.', 'Inject Angular Firestore as a dependency into the constructor of the service to utilize it within the service. It explains the process of injecting Angular Firestore as a dependency into the constructor of the service to utilize it within the service.', 'Generate a service called item service and integrate it into app.module.ts for Firebase interaction using AngularFire. The chapter explains the generation of the item service and its integration into app.module.ts for Firebase interaction using AngularFire.', 'Creating a separate folder called models to hold the interface file for reusability and maintenance.', 'Moving the interface definition into a separate file named item.ts to organize the code and improve readability.', 'The chapter explains setting the items collection as an Angular Firestore collection and initializing it as an observable.', 'The chapter highlights the need to switch from value changes to snapshot changes as the former does not include the ID in the data.', "A method 'getItems' is created to fetch items through the service and is automatically executed using the lifecycle method 'ngOnInit' for data initialization.", 'Subscribing to an observable using value changes in Angular Fire to retrieve items from Firestore, followed by subscribing to it in the component and logging the fetched data.', 'Explaining how to fetch and display items using Angular and Firebase Setting items as a property, looping through items, handling no items scenario, and fetching data from Firestore', 'Demonstrating the process of fetching data through the service using Angular Fire and returning the items as an observable.', 'Mentioning the need for ID handling when fetching data from Firestore Highlighting the issue of missing ID when fetching data and the need for using snapshot changes and map to handle it', 'Logging the fetched data, showcasing the presence of item one and item two.', 'Demonstrating the use of NG4 directive to loop through items and handle the no items scenario Using Angular NG4 directive to loop through items, handling no items scenario using ng if and ngTemplate']}