Let's Code: Todo App with Angular 10 and Firebase | Stefan Omerovic | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Let's Code: Todo App with Angular 10 and Firebase

teacher avatar Stefan Omerovic, Full Stack Web Developer and Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

20 Lessons (1h 29m)
    • 1. Introduction

      1:33
    • 2. What is Angular and How to Use it?

      2:55
    • 3. Creating an App

      3:54
    • 4. Installing the Dependencies

      5:48
    • 5. First Component - Header Component

      9:24
    • 6. Home, About and Todos Components

      2:05
    • 7. Angular Routing

      4:49
    • 8. Content for Home and About Page

      4:18
    • 9. Todos Page Content

      9:10
    • 10. Firebase and Installation

      7:20
    • 11. Cloud Firestore Collection - Todos

      3:32
    • 12. Angular Service and Injections

      2:34
    • 13. Getting Todos from Firebase

      10:59
    • 14. Showing Todos on Web App

      3:04
    • 15. Functionality for Adding of Todos

      4:28
    • 16. Deleting of Todos

      3:14
    • 17. Updating Todos

      2:52
    • 18. What we Learned and Testing

      0:52
    • 19. How to Deploy App to Firebase Hosting?

      5:23
    • 20. Thank You and Goodbye

      0:58
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

75

Students

--

Project

About This Class

Let's dive into Angular 10 and Firebase by creating our Todo App with this 2 technologies. We will work with Angular, Firebase Cloud Firestore and Firebase Hosting to make this app fully workable. Let's code.

What will you learn:

  • Angular Basics ( Setup, Components, Modules, Models, Services, Injections )
  • Angular Routing ( Routing and Redirecting )
  • Angular HTTP ( We will work with Module, Requests, Data )
  • Angular Handle Data ( Get, Modify and Remove Data, ngFor loop to Render Dynamic Data )
  • RXJS Observable ( What is it and How to Use it )
  • Firebase ( Setup, Configuration firestore, anfularfire2 )
  • Firebase Cloud Firestore ( Setup, Todos Collection )
  • Firebase Hosting ( Setup, Initialize and Deploy )

Let's Code is my series that is based on real life projects with variety of different technologies. Let's Code is series created for Skillshare and you are watching it's first Course, Todo App with Angular 10 and Firebases.

Meet Your Teacher

Teacher Profile Image

Stefan Omerovic

Full Stack Web Developer and Instructor

Teacher

Started in age of 18, at usual starting point for Front End. For first 2 years mostly coding static websites with Front End Frameworks like Bootstrap. After that, explored next point on my path to become Full Stack Developer and entered in Web App Development. Started openly coding in Angular and handling everything regarding Front End Side of multiple projects. Currently MEAN Stack Developer with few years of experience.

Started my way as Self-Taught Developer, I never stopped learning new Web Development Technologies and I plan to learn and became even better with those. Trough few more years I plan to learn Python and come to Software and Game Development side with it.

Experience as Instructor

The reason why I got into teaching Web Development was at fi... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome to my first course in my Let's Code Series. My name is Stefan Omerovic, and I am self-taught web developer and I am an also an online teacher. This course is for you who are just starting with Angular, or for you who are willing to upgrade your skills to a next level. As you can see through this course, we will create to-do app with Angular and Firebase. Course is fairly simple so you can code along with me and that way create your first to-do app. In Project section of this course, you will find, this whole app live on Firebase Hosting. So you could take a look, what will you create through this course, live. App will have integrated packages like Bootstrap and Font Awesome. But also we will work with Angular components, services routing through this course. Then we will also work with our Firebase, our database. There we will create our cloud firestore, our to-dos collection, and the render our to-dos on our screen. We will also be able to modify those to-dos, add those, deleted those as we wish. And for the end of this course, you will learn how could you deploy your to-do app to Firebase Hosting and see your app live as we will work through this course with Angular, Firebase and even a little bit of a bootstrap, it would be good if you know at least the basics of those. It is not highly required, you will still be able to work through this course, but it will be more simple for you to follow up with the course. Let's now see what is Angular and how could we use it? 2. What is Angular and How to Use it?: So as we are starting right now, let's first see what is Angular. So Angular is a JavaScript framework for a single-page applications. We can use Angular to develop applications across web, mobile, and even desktops. Speed, performance and project management of Angular is well-known in community. There are also reasons why Angular is at the top next to Vue and React.js, as a JavaScript framework of course. Angular has also couple of unique tools and also comes with already integrated features like RxJS, which is advanced topic, but we will work with observables of those through this small course. So you will get at least grasp of it. Angular also has his own tool for managing the modules called Ivy. It also has and supports routing, as you can see here, routing and navigation, HTTP and injections. We can use services in Angular to inject and easier share our data through our pages and components, which will you see in several videos. Angular also has his own documentation, which is open right here. This documentation is well-written and honestly a lot to read, especially for a beginner. Good thing there with the documentation. There is a whole project, Tutorial Project with it. So I'm currently on introduction page of the Angular Docs. And here there is a Hello World. And if I click here you can see tour of heroes tutorial. If I would click on that, I would start creating the Angular application called Tour of heroes and with it, you will be able to create the whole application, whole project with Angular. Angular has a great team also behind it. It is developed by Google and it is being often updated and upgraded. To be precise, about every six months, Angular comes out with a new version. That is why we are creating this app in Angular 10. If I scroll down here, let me close this. You will see that the diversion is a stable one. If I would go, it's 10.1 and the next version will be 11th version. And you can see that we have already 10 version of Angular. Through these versions, there will be changes, but the none of those are crucial. They are mostly to speed coding, smaller bundled packs and maybe new feature. The only big change that happened was from Angular JS to Angular 2 version, which is totally different framework at this point. I could talk about Angular for hours and still I will have something to say. So I think that the best, the best thing for us is just to jump into code and just create our app. You can follow up with me step-by-step. And by the end of this course, you will create to-dos app with Angular and Firebase. Let's Code. 3. Creating an App: So through this video, we will create our app. To do that. You need first to have Angular CLI on your machine. So go to cli.angular.io. Here you have a script to install CLI for Angular. You can just run this npm install g flag for globally @angular/cli. When this is finished, you successfully installed CLI and you will be able to use it. Now, here also, you see this ng new my-dream-app, This is, first usage of Angular CLI. With this, we can generate our app. So I am now in my console. You can open up your terminal or a console emulator as I have here. So I could just run, for example, ng new to-do app like this. If I would hit Enter, my app would start creating itself. It will first ask me, would I like to add angular routing? I could pass. Yes here, for angular routing to be automatically generated for me. So as we will use routing a bit in this course, we would need that. It will also ask me which stylesheet format would I like to use? So I have CSS, SCSS, SASS, Less or Styles. I would use CSS, just a simple one for this course. The app now started installing itself, and once everything is finished, we will continue our work. Just wait a bit. So now I successfully created my to-do app. And now next thing would be this cd my-dream-app, basically cd, then to-do app, then our app name. So I will run cd to-do app. And that way I am currently in my to-do app in my terminal. So let me run clear to clear this a bit. And at this point that we are in our app, we could just run ng serve. And ng serve will serve our app on localhost 4200. So when I run this ng serve like this, once this is finished, I can open my localhost 4200 and I will see my app that was generated by Angular CLI. So everything is finished. I will copy this localhost and go to my, google, paste it in my URL like this. And here we are. Obviously my app has a bit of content here, so I will just show you where this contents stands for now and go through the app a bit. We have some content in our app, obviously, I opened up my app with Visual Studio code. If I would go to the source file and to my index.html, this index HTML will serve my app fully. You see this App root kind of HTML element here. This will basically render my entire app dynamically based on my components, modules, services, etc. If we would go to this app folder here we would have this app.component.html. Open it up. And here you can see that we already have some content inside, right? So if i would control a, alland delete. And at this point I could type, for example, H1 and type Hello World like this. Control S to save, my app will automatically reload as our app is still running on the localhost 4200. And now on my screen I could just see Hello World text, which is coming from my H1 tag. So basically entire content that we had was in that app component file. And now we are starting clear. We removed the angular default content and we're here just with our content. So now that we successfully created the app, it is time to install all dependencies that we will need through this app. Let's install those. 4. Installing the Dependencies: So plan for this video is to install all the dependencies that we will need and use through our course and our app, obviously. We are not installing RxJS, or HTTP or some other dependency. Those dependencies are mainly already up and running with the angular. We will use Bootstrap and the Bootstrap we will use jQuery. We will also use icons from Font Awesome. So we will need to install those to use it. And if you ask yourself like could we just imported those in our main file, our index HTML file? Yes, we can, but I will show you more friendly way for Angular to do this and not to populate our index.html file. We will also need firebase dependencies, but we will install those a bit later when we actually start our work with Firebase. So in my console, if I would Control C first to stop my local server from running. Now, I could run, for example, npm install --save to save that dependency, bootstrap, then JQuery and Font Awesome. If I would hit Enter, oh, sorry. I mistyped Font Awesome. Like this. If I would hit enter at this point, my dependencies would start installing. And at the end, I would have Bootstrap fourth version installed. As you can see, 4.5.2 is added, then JQuery is also added, and Font Awesome is also added to my project. So we successfully added those dependencies into our project, but still we are not using those. Just by installing, Angular won't know that it needs to use those. So where should we use those dependencies if we are not using those in the index.html file. Down below, you will have this angular data JSON file. If I would open up that. Here is a whole schematics regarding this Angular app that we have down below, you see the styles array, these styles array is basically array that holds our CSS, icons or stuff like that. And these scripts array is what is holding our scripts, our JavaScript files. So we could just import those here and not import those in our index.html file. And once we installed bootstrap, jQuery, font-awesome, here in a node modules, if I would open up that, if I scroll a bit down here it is Bootstrap. If I would open up this here as I installed it, I have it here in my project. I have dist folder. I have css for example, and I have bootstrap.min.css file that I could just import into my app. And we will do that right now. So let me close this now. This node modules, yep. And in my styles next to my source, styles.css, this file is basically this file in the same level folder level as my index.html. This is base and global styles.CSS file used through the app. So just below it, I could use comma here and add one more import. For example, node modules slash bootstrap, slash dist slash CSS and slash bootstrap. .min it's minified file, .css. And by this we imported Bootstrap. And we also need to import Font Awesome. So for that one more comma and down below, Node modules, slash Font Awesome, slash CSS slash Font Awesome, .min.css. And yeah, we now have a Css for our icons and also our bootstrap framework. So let's now add scripts for Bootstrap and jQuery. So here in my scripts array, I will just add node, node modules slash jQuery slash dist for distribution and jQuery, .min.js file. And this is important before importing our Bootstrap. We should also import first our jQuery. It will then jQuery will be first loaded and Bootstrap will know how to use it at that point. And now to import the bootstrap. So node modules slash bootstrap slash JavaScript slash not JavaScript, sorry, slash dist, then slash JavaScript and slash bootstrap.minified that js. And this is it. So now I could just rerun my localhost or 4200. So I will run ng serve --open. This open flag here, will automatically open my an application in, 00:05:12.185 --> 00:05:13.025 Like this. You can see that my H1 tagat this point doesn't look so basic as it has default stylings from Bootstrap. If I would go to my app component at this point, and I would add the I with the class of font-awesome, fa. Check for example, save, on my local host. You will see this check sign here. Let me zoom it a bit. Yeah, this one, basically it is coming from Font Awesome. So we have a bootstrap and fought awesome, successfully imported into our app. And this point we could create our first component. 5. First Component - Header Component: So now in this video, Plan is to create our first component. We will create header component, that navigation bar that will always be at the top of our application. We will also create whole UI for that component. So let's start. We could create component on our own, but there is a better and faster way to do that. I could go to my terminal as I am here and here on my side. On the right side, I don't need to do this in my main terminal where I'm running localhost. I could still run localhost and run this script that I need. Angular CLI will give us a bit more functionality and we could with that also generate our component. So I could type something like this, ng g c header. So this G stands for generate. So I could type of generating instead not g, and this C stands for component. So I could type fully component, but this is a shorthand and the header will be the name of component. So if I hit Enter here, after some time, you will see that angular created a new component for me. Header component HTML file, spec.ts file, which is a test file, which I will talk a bit later, typescript file and CSS file for us in my Visual Studio code that looks like this. Next to my app component, I would have this header folder. So if I open up that, I would have my HTML file for my header here. So obviously as angular generated this header component, it also added this paragraph header works for us. So by this, we could just check if this really works. So here in my header typescript file, I have here selector, app header. Basically this is a selector. How could I use this component in my HTML There are also other imports like template URL, which is using header HTML component, which is basically HTML part for this component and style for this component is header.css style. So if I would copy this here, and I go to my app component, main component of my application, Delete Current Content. And I will just use my app header like this, save my file, on my browser, we should see something differently. So now on my browser, don't have those H1 tag and that check icon, I could zoom this a bit. I have this paragraph with header works. So basically my component is successfully implemented into our app and it is used at this point. So now I wish to code the content for this component . So bacisly I will code that navigation bar with the bootstrap. So I hope that you know at least the basics of Bootstrap, but it will also be easy for you to follow up. with it. On my left side I will have my code and on the right side we will have a live preview of that code. So here I will close all of my editors that I have opened and we'll open just my header component like this. I will delete this paragraph, save. And on the right side, we don't see that paragraph, so we could just start coding our navbar. So I will create the, let me first put the comment of navigation bar. And I will down below create nav, nav HTML5 element, I will add the class on it. For navbar. Then navbar expand lg, then a navbar dark. And I could use bg dark also. So save. And you can see these kind of grey line. So for you who doesn't know the Bootstrap, Bootstrap is basically HTML and CSS, and also a JavaScript framework which has also created, already created classes for us to use. So this navbar will basically created the navigation bar for us. This navbar expand lg. We'll expand our navigation bar to take up full screen on larger devices, but on a smaller device is content for our navigation bar won't be visible, but it will kind of need to be toggled, will be to the button which you will see soon enough. A navbar dark, will color our background color of the navigation bar to darkish color like this, gray, dark gray, and bgdark. We're kind of recognize that the navigation bar is dark and basically put the text to the light, to the light basically to be white text. So good contrast. So first of all, let me create that logo that we usually have in navigation bar. So I will create this anchor tag and for my href, I will just pass this hashtag. I need to have a class. And this class will be navbar brand, which is glass to create the logo inside of the navigation bar with Bootstrap. And I will add the text for this to be a to-do app save. And here you can see this logo right, already looks great. So now let's create the that button down below. This button, will basically be the button for this toggling navigation bar on smaller devices. So button, yep. And the type of a button? Type should be a button. And class, there is a class already created for us called navbar toggler like this. And I could use the data toggle to be collapse. Let me ALT Z that. So you could see whole content here. These data-toggle collapse is basically Bootstrap work to combine JavaScript with the HTML and that way it will create this collapse animation for us. Also we would need data target. So basically what type of content will be toggling with this button? And I would use the ID here, res_nav. for example, like a responsive navigation responsive nav. We will create soon section with this ID, but we also need the content for our button. So I will create a span element like this, and I will use a class of navbar. toggler, yep, I need to use two g. And Icon here. So already on the right side, you can see this icon doesn't look right, right? Its white icon. So if I would come to this navbar toggler and I would pass one more class called bg dark. I would have dark icon now here. So now to create this responsive navigation for us, so after our button, I would create a div with the class of collapse and navbar collapse, this class, these classes are the classes that are defining this whole section to be collapsible with our button. And I should create the ID here of res_nav. Like this. So our button could target that. So inside I will have just my links, Links that, kind of navigation links obviously. And for that I would use unordered list. I would pass the class here of navbar nav, and also ml alto. So it will basically put the margin on the left side, auto, automatically. So it will move my content to the right side with this, then I need to create a list item. As you know, the lists usually have list items. So list item will have a class of nav item. And inside I could create a link like this. Href could be just the hashtag. This link would lead me to a homepage. I should also create a class here of nav link save, and we don't see it on the right side. But if I would shrink my, my content a bit, still nothing. Here it is. So even on a big screen devices, we have this kind of button here. We did something wrong. Obviously, what we did wrong is this class navbar-toggler should have two gs like this. And now my navigation bar won't have that button on larger screen devices. But if I would expect my element, and, let's move it to the iPhone X. We will have this button here. And if I click on it, it will just collapse that div with collapse icon on it. Collapse class on it, sorry. So let me move this backwards and go back to my code. And now in my code I could create other items in my list. So I would copy this two times, 1, 2 and I could, For this one use about and todos, which will be the whole page for our to-dos. And now we have this home about and to those which are not usable at all, obviously. And we don't have still the content for those. But now we fully created our header component. We can see how this will also look on a smaller screen devices. If I would expect my element, open up the iPhone view. Yep, it looks already good. And now that you know how to create a component and use it, let's now create our other components that we will use through this course. 6. Home, About and Todos Components: So now that you created the header component, you should know how could you create the other ones. So this is good for you to test yourself. We will need home, about and to-dos page. So it will be good if you would generate components for those pages also. So I'm back in my terminal and here on my right side of the terminal, I'm still running my localhost. I will run ng generate component and home like this. But now I would pass, -- and skipTests like this. This skip tests, it will basically not generate the test file for me, as we kind of don't need the test files for this simple small app, I would create the same thing, but now it will be the about component. And you see that it is generating and creating our components immediately. And lastly, like this to-dos. Yeah, so now in our code next to our header component, we have about home and to-dos component. And all of those components, if you would go to theirs HTML files, it is just their name and works word. So at this point I would go to my app component HTML here. And below my app header, I would use App. And you can see that here I could use already home like this and Control S For this to save it. And let's go to see it on our local host. You can see below my header, there is a home component, right? For this kind of, our header component is shareable through other components, right? So once we are on about page, we will still see these component here, but here the content will change. These home works will be about works, will be to-dos works, right? And for that, we use routing in Angular to change those, basically to change those routes, to change those pages, we use a routing that is already implemented in Angular. So let's use that in our next video. 7. Angular Routing: So in this video, we will set up routes for our app. We will also create links that once we click on those, they lead us to the page that we need based on that route. Those pages will also show just the content that they should show for that page from that component basically, let's start. So in my project, I could go into my source here and app. And I could go here to App routing module. If you remember when we generated the Angular app, it also ask, asked us, do we wish to integrate the routing it to the app? So that's why it created also this app routing module for us. So in this module, we have this const of routes, and this is where we basically setup our routes for our app. So in here, I will just use my curly braces and to set up the route, I need to first pass the path. The path will be the path for that route and I will type home here. And after that, I need also to set up component, component that I wish to use, right? So component will be home component, one second component that we have already installed in our project. So this is basically how one route looks in Angular. We need to have about and To dos that more. So down here, I would use about like this. And the component will be about component. And also I will use to dos route, to dos. And the component will be to dos component, right, like this. Also, if the user visits the empty route, we should redirect him to the home component I believe, so here above, I will add one more route, that route. And let it put a comma here. That route will have a path of empty. And instead of component, i will use redirectTo and I will use home here. I wish to redirect to home component. Also, I need to pass path match. I wish to match my path fully. So full here, and this is it. So now that I am in my app itself, I could refresh my localhost here, and you will see that it will lead me to the homepage. Also, if I click here home, nothing works right? About also, everything is going to homepage. So we need to set up these clicks to lead us to the right pages like home about and to-dos. To do that, I will open up my header HTML component here. So to set up our home component to lead us to the home page, we need to use these braces and the router link. Router link could lead me too. Homepage like this. I will copy this and paste it two more times for about and to-dos. So here should be about page and to dos page like this. So in my app itself, if I click on about it will lead me to the about page, if I click on home, it will lead me to the homepage. If you click on to dos, it will lead me to to dos route, right? Also, I should set up the active class for which route is currently active on my links. To do that, we can use something called the router link, active. Router link active comes from Angular and we could just pass to that class. And you know that Bootstrap already have his active class and we can use that. But you also can create your own custom active class and setup that here. So router link active for each of link items here, I will use to be acting. So now you can see the time currently on my to do's route and my to-dos link is active. If I change to about, it will be active, change to home, it'll be active. But there is also a problem. We are changing the route obviously, but the content itself stays for home works. We need to change the content also. So just by setup our navigation bar and our routing, the content itself won't change for that where we implemented the home component here in our app component.html we could remove it right now and use something called a router outlet. Router outlet will render the content based on the route, based on the component from that route. And now you can see that I am in my about route and it says about works. Let me also zoom this a bit. So you could see if I change this to a home, you will see home works to dos, to dos works. So our routing is setup fully, and we should now have at least some of the content for our pages here. So let's start working with those. 8. Content for Home and About Page: So now we wish to create some content for our pages. We will start with the home and about pages for my homepage. I will first close all my open files here, and I will go to just the home HTML here. I will put here first the comment of home, sorry, mistyped homepage content. And we could start creating our content here. I won't do anything big just as a small content for home and about page. So div, as we are kind of not focusing on those in this course. So end of Home page content and the classes for my div would be jumbotron and also text center. These classes come obviously from a Bootstrap. Jumbotron is a big section from a bootstrap. Then I will use H1 and I will use a class on it display-4. Like this. It will be like a, it will use the H1 tag, but it will display it like a four for size and, Hello World will be a text for that. Then I could use a paragraph here with a class of lead, which means that this paragraph will be more visible, bigger paragraph as it is a leading paragraph into the page. And it will just say, welcome to our to-dos app with Angular and Firebase. That's it. We could also add a button here. So button like this I will add a type for the button will be just the button type. And also the classes will be btn, btn-rimary, and btn-lg for large button and primary will color it, color it to the primary color of bootstrap, which is a blue color. And here I will use a to-dos like this. This button will lead me to to-dos page. So I could use here also router link. And it will be set up to lead me to to-dos like this. This should be also in quotes, single quotes. That's it on my home page. Now you can see this Hello World. Welcome to our to dos app with Angular and Firebase text and to dos text I want use to-dos text here, I will setup, go to to-dos Like this. And now, if I would click on this button, you can see that it will lead me to to-dos page, right? So now let's create some content also for the About page. For about page I will open my about HTML. So I'll first put comment about page content. And here I will create a div. Let me also put end comment, end of about page content. And now I could use here container, class, container and text center good. Inside I will use my H1 with the class of margin top to 5. It will move my H1 by five spaces of Bootstrap. Inside I will pass About page like this. And let's add also a paragraph. Paragraph could also be a lead paragraph. So I will add the lead class. Text inside will be, let's code our to-dos app. And let me add one more paragraph. This one will be normal paragraph and I will use app will be fully developed with Angular and Firebase as a database like this. So now in my about page, I have content like this that looks similar to the home page, but without that jumbotron. So it's good enough for this two pages. We should focus now on to-dos page basically. And let's code that the next video. 9. Todos Page Content: So my main goal here on to-dos page is to have a section here at the top kind of header section where I will be able to add our to-dos. And down below, we should have two lists, one lists for to-dos and one list for finished to-dos, those to-dos that we are kind of already done. So I will close my files that I opened in my Visual Studio Code, and I will open up the to-dos HTML component. So here I could type comment first, to-dos header, add a div, and also add the end comment end of to-dos header. And this header will have couple of classes. I will first use a class of jumbotron, and text center. Center like this. And inside I could heal my container class, then inside of that container, we could have one more div with the class of row. And for death row, we could have a grid inside. So I will add a div with the class of column small devices 2 and column medium devices 3 like this. This will just serve, as a spacing, I will just move my main section of a header into the middle of my screen. So I will have two or three columns on a left side empty. And itself, that header content itself will have a classes of column sm of eight and column md of six. So which means that on smaller devices on the left side two of columns will be empty, then it will take up eight columns of the width, and at the end two of columns will be again empty as Bootstrap has 12 columns. So 2 plus 8 is 10 and 2 columns empty, which is 12. So here I could also add comments for end of container, end of row row and end of content like this and the inside my content here, I could first add H1 add a class of display 4 and heading will just say Todos like this. And here I could have the input. Input group with the input and the button for adding of my to-dos. So I will add a div with the class of input group, which is the class to define the input group. And inside I will add my input field, which is a type of text. And the classes will be form control, which is the class to kind of style a bit more our input, not just you have that basic one. And the placeholder will be todo title. That's it. And I should also have a button here, but I will append this button to my input field. So those are kinda both stacked together. And I could use an input group and append class in Bootstrap for that. So div class is input group append. And inside I will have a button just. This button will be a type of button. And we'll have a Classes of btn, btn outline success, which is good enough. It will also just say add todo, that's it. So on my page you can see how this looks. I have a todos heading to-do title, input field and add to-do button, which is kinda bind here to the input field. Let's now create our first list of our to-dos. For that. Just below my heading, header. I will add a list of to-dos add the div. I will add here end of to-dos. And this first div should be the container. So class will be Container. Then I would have div id, class of row. Then I will have a div with class of column sm two and column md tree, which is just again spacing as we have in our header of to-dos. And one more div with a class of column sm eight and column md six, which is same thing as we used here in our header, right? So as you wish to add to-dos lists, we will just add a list group from here. So unordered list will have a class of list group like this. And inside I should have, in my items inside I should have this kinda box that could be ticked to kind of finish up our to-dos and also the titles for our to-dos. So I will add a list item, should have a class of list group item like this. And inside, as I mentioned, I will have my icon. So class will be Font, Awesome, Font Awesome square o. I will use that one. And below my icon, I will have a title. Which could be go to walk like this. Let me also add two more to those here so we could have something to show. So go to Walk, learn coding. I don't know. Drink three gallons of water. Yeah. Okay, so for this now, we can go to our browser and in here you will see that list right? Later. We will be able to tick those and move those into the finished to-dos. And this should also be dynamically rendered here, not to just statically like this here. But for now let's add one more lists down below for finished to those. So here, where I have end of list of to-dos, I could copy this entirely. Paste it down here, and I will add finished to-dos comment. End of, finished to-dos like this. And I will have a container, I will add to this margin top to five to move it a bit from a top, row, it's ok. This spacing div here is okay. Then I have my content div, which is okay. Just above my unordered list, I will add H4 with the class of text center to move it in a center. And it will just say finished to-dos like this. List group could have, I don't know, items like buy a T-Shirt. And that could be okay. I could remove this two list items, but the icons themselves, I won't have empty square icon here. I will have font-awesome, check square o icon. And after my title here, I will have a icon also called let me add it. I can will be Font Awesome Font Awesome trash, icon, trash-o icon I could use, which will use basically be used to delete our to-dos. And I will float that to right side. So I will add the float right class and margin top to 1. This is it. So now in my page you can see this finished to-dos list, which is a buy a t-shirt, obviously ticked square here and this icon here that could be clicked later, that will be clicked later to delete out to-dos. So we will be able to confirm our to-dos to finish those and they will be immediately move to the bottom list. And also we will be able to, un todo our to-dos and they will be moved to the list about. So our to-dos page is also fully finished now, but it is just UI part. We would still need to add functionality. Good thing is that our whole app still looks great on desktop and smaller devices. So we could check that. I could open up smaller devices here, and you can see that the to-dos app to-dos page looks great. About page also, homepage also, right? So go to those. Great. So let's now set up our Firebase. 10. Firebase and Installation: Okay, so now it's time to talk a bit about Firebase and also to set up our Firebase for our application. Firebase is this development platform with several features that we could use for mobile and web development. It is developed by Google and it helps us to build and grow our applications. Through this course, we will use the Firebase cloud database. With Firebase, you don't just need to use a cloud database, but there is also a real-time database. Firebase also supports other features like authentication, storage, hosting, functions, analytics and more. By the end of this course, we will work also with Firebase Hosting and deploy our app to Firebase. If you already have the account. You are looking at the same screen as I am. This is basically the console of our Firebase and the main part for myself here, if you don't have the account go to the process of signing up as it is just the basic and simple. So here we will add the new project. So I will click on this big screen here. And we first need to create the name for our project. So that would be to do app. Firebase will also generate a couple of characters at the end. So we could have a unique identifier for our project. So now I could go continue and it will ask us first about Google Analytics. Do we wish to integrate that into our project? There is no need for that. As this project won't use any type of analytics. So create the project. Firebase is now creating our project and setting up everything for us. Once it is finished, we will be redirected into the platform, into the dashboard of our project. So our new project is ready so we could click continue, And it is redirecting us into the project itself. So this is our dashboard. Here on the side you can see features that Firebase supports like authentication, cloud firestore, real-time database, storage, hosting, functions, machine-learning. Also, there is a testing for equality of the application, full analytics and how to grow the application with different types of testing, links, etcetera. Here at the top, you can see that to get started by adding Firebase to your app, we will do this first, if you don't see it here at the top, you can click here on a cog icon and go to project settings. And you will see it here in your app section down below. So I hope that you remember that I first mentioned that we will install dependencies for Firebase. So we need to install 2 dependencies. So I will run npm install, --save, firestore, and angularfire2. Fire store is the dependencies that will connect us to the, to our Firebase and angular fire 2 will, help us to work with it so I could just hit Enter and wait for it to install. So once this is finished, I will go back to my Firebase view here. And you can see that I could integrate my project from Firebase to iOS, android, unity, and also web apps. So I will click on web apps and first thing that I need to do is to register the app. So kinda to create the name for the app. So i will create a to-do app name, which we will use later in our Angular project to connect both together. It is also asking us about Firebase hosting. We won't integrated here. We will later integrated when we are... kinda manually. So you can see the whole setup. So register app here. And it will give us back the SDK that we could connect to our app. I could just continue to console here. And I will see that SDK also here. This Firebase config is the object that we kinda need. So we need to integrate that into our application, into our environment of our application. And with that we could work with other things from Firebase. So now in my terminal, I will go to source. And here environments folder. There is environment Ts. This is the folder for staging, for testing or coding this environment file. I could hear just use comma and paste that Firebase config object. It will not be equal but two dots, and I will remove this ending line here. And also I will quick fix this to be quotes, not double-quotes. I fix just for 1, 1 second, I will fix for all, yes. So by this, our application, when we hit this API key or the domain, database URL, it will know how to work with those. There is also a storage bucket that we could use, a messaging and app ID that we could use from our Firebase. Also, I will copy now this object and I will go to Environment Production file and I will paste same thing there. Mostly you will have a different things from for your production and your staging, your database will be different, your testing environment will be different. Probably a repository, you will have different those also. So here I am just using the same for the purpose of this course, but mostly you won't use it like this, right? So also now that we have, this configuration in our application, we still need to set up those dependencies that we installed. So for those, I will go into the app and app module here. So I need to import my dependencies here. So I will import Angular fire module like this. This will be automatically imported from Angular fire 2. And this module, will connect us to our Firebase. So here I will use initialize app method that this model has. And in it I will pass my configuration from environment file that I have. So I need to also import that environment file. So here at the top, I will import environment from like this environment's folder and Environment file. So here now I could pass my environment. and on environment I have Firebase config here, right? This object. Yes. And with this, we are kinda passing our Firebase configuration to this angular fire module. But still we need to kinda explicitly tell, tell it like which app is it. So here I will just pass the name of the app, which is to do. Like this. And with this, we successfully imported, kinda connected our Firebase with our application. I will also now import here one more module like Angular fire store module like this. This one won't be automatically imported, so I will import it here at the top. So import Angular Firestore module, from, angularfire2/firestore, like this. With this, we fully connected our application with our Firebase and we can work with it right now. First, let's go back into our Firebase and create our cloud database there. We should also create to-dos collection in that database and kinda create a couple of to-dos there. 11. Cloud Firestore Collection - Todos: So now I am back in my Firebase. Here, you can see that it says that I have one application that to-do app, which is correct. I wish to create Cloud firestore now for my application, so I will go here on cloud firestore. And it will basically offer me to create this cloud fire store database. So you can see the video about the cloud fire store, but I will immediately go and create my database here. I could create one for production mode and one for test mode. Test mode will basically allow me to read the data, write data and delete data from it. Not just me, but anyone who connects to my app and production mode will just give the permission to the users that has that permission. So I will just open this up to not work with the production mode for now. So test mode is okay. This test mode, we'll just last for 30 days. So after 30 days, it'll go back to locked mode to kinda production, so next. And I also need to pass the location. So pass like Europe West, that's not a problem for me as I am in Europe and kinda on Europe East, but Europe West is more, is the only one that I could choose here. So now that everything is created, I am redirected to my cloud fire store. To my database.. Here now, you can see this to-do app and those kinda couple of characters that were generated. So that's correct. So now I could create my collection. If I click here on start collection, I could pass collection ID. This ID will be just the name of collection. You can see the example here, Collection users. So if we are creating the application that holds users, we would have collection of users, but we are creating collection of to-dos. So I will pass here to-dos collection ID. So if I go next now, it will also offered to me to add my first document here. So kinda first todo. So for the document ID, I will auto-generate that ID. So this ID will be generated from Firebase and field, so the fields that we, that our to-dos will have is the title for todos, right? And the value could be go to store like this. I will add one more field, which will be completed field. And this field won't be type of String, type of Boolean, and it will be false initially. So save. Now, you can see that I have my to-dos collection here. I have a document here by the ID and document values here on the right side. Let me create two more documents. So as document auto generated, the ID field title will be buy a t-shirt, for example. Let me put the s also capitalised and the add field. Now I will use completed field with the type of Boolean and it will be true. Save. And now one more document, autogenerate ID. Field, title. Type is string, which is true and value for that title will be wash a car. Then add a field. Completed. Type is Boolean, value is false. Save. So now we have at least our data in our database. So we could now in next video, pull that data into our application. 12. Angular Service and Injections: So to pull data from Firebase and work with the data we will use Angular service. Service in Angular is the type of files that we could use to share our data through components. We will create one now and we will use it to communicate with our Firebase and paste that data from firestore to our components to our to-dos component here. Services are injectable features so they could be injected in components, Other services, route guards, directives, and that's why we use them for those. So now I could run here ng generate service. I will generate service in services folder and the name will be to-dos service. I will also use skipTests flag here, so it doesn't generate the test file for this service as I don't need one. So now as I'm finished with this, I could go back into my service. So in my service here, so I will go to source app and I will have services folder and to-dos service to dos service is generated. And first thing that you can see is this injectable. This injectable is basically provided in a root. So which means that these services provided in the root of our application, so it can be shared through all modules and components that we have. To work with the Firebase and firestore. We also need to import the couple of modules from Angular fire 2 here. So at the top I will type import. And now angular firestore, which will work directly and connect us to our firestore, and then Angular fire store collection, which will basically work with our collection of to-dos and angular fire store document, which will work for, with each document of that collection. And I will import that from angular fire to / fire store like this. So now I will use my angular fires store first. Here in constructor, I need to pass that angular fire store. So I will use private fs for fire store. And I will use it to be set to the type of Angular firestore. So with this, we can work with the fire store with this fs true through our service. And by that we could select our collection and do a couple of other things. And now in the next video, we will use those and work with our firestore to get our data back. 13. Getting Todos from Firebase: So plan here is to use our firestore angular firestore in my service and get my data back from my cloud firestore that I have. So I will first create a couple of variables. So to-dos collection, as we will pull the collection of to dos, to those collections will be the type of Angular firestore collection like this. And this firestore collection will have the type of to-do. We still didn't create this type. So this to-do will be the model of our data kinda. So I will create that model right now. I will go here in my app and create folder on it, called models. And in models I will create to-do . modal . ts. So now in this file, I could export my interface of to-do, which will be kinda model for my data. And this model for my data will have an ID. But this ID won't be kinda required. We will get it back, but we don't really need to send the ID to create the data itself. So ID will be type of string. Then title, as you know, will be type of string. And also we will have completed, which is type of boolean. So by this now, I could import my to-do model in my service here. So to-do, I will import it at the top, here. And now I could use this model to model my data through the service. As I have to dos collection. I will now create also to do doc. To do doc will basically be type of Angular fire store document, and it will also be the type of to do. This would be each individual document that we'll work on kind of to edit it, deleted or updated in some sort of way, right? And also I will need to dos, my whole array of to-dos my main data. So to-dos, which will be the type of observable like this, that needs to be imported from RxJS here at the top. The observable, I will talk about it in a second. The observable will also have the type of to do, but it will be to do array as basically, it, this to dos will hold the array of our to-dos. So my observable here, the observable is basically the wrapper for my data. So kinda, I'm wrapping my to-do data to dos data. And on those, I could use different methods, which you will see in a second. But also I could subscribe to that data, get the data correctly and as Angular with the Firebase will return the kind of observable data to me. I will, it will be a lot easier for me to work with those and the handle those on my side. So now in constructor here, I could set my data, set data here basically. So I will use this . to-dos collection to be equal to this kinda this this . fs that I mentioned, fs like this. And on FS, I have a method called collection. This collection method will basically pull the collection that I have on my Firebase. So the collection is name of to-dos as I hope that you remember this. So now that I have my collection in my service, I can pull the data, each document from the collection itself. I need to save that data in my to do's. So I will set this . to-dos to be equal. To this . to-dos collection. This collection that I set here from fire store. And I will use . snapshot changes. Snapshot changes on this. Basically, I could use not just snapshot changes, but also value changes. Value changes will just return the data to me and it will just return these documents data to me, right? I didn't need to pass any additional functionality to return data to me, but I won't get the ID with value changes. To get the ID, I need to use a snapshot changes and kinda add some additional functionality. Value changes is kinda returning just the data from this right side. And you can see that the ID of the document is not in the, in the right side of your screen, right? So it's kinda in this main document level. And to return that ID, I need kinda to also use the snapshot changes to take a look deeply into the document itself and also to bind that ID to the document itself and then return whole document and save it in my array. It maybe sounds complicated, but it is not obviously. So here, now I could use a pipe method pipe method will allow me to bind to these snapshots changes. Couple of methods. I won't use, couple of those I will use just one. I will use the map method here. So map itself needs to be imported. So I will import map from Rxjs / operators. So you can see that as my data is observable, I can work with a map on it. So this map will give me some changes of my data from a snapshot changes, right? So as I have some changes, I will use a method here, arrow function here, mistyped that, ok. And here I will return my changes, but I will also use map on those. I need to map through those changes to see the data from those. So as I'm mapping to those, I will have a document itself. So document I could use an x here. It's not a problem. So now that I have this document on its own, Let me use closed sign here. Now that I have this document on its own, I could go through that document and set it equal to the data that I need. So I will create that const of data here. And set it equal to the this document ., and this document will have the payload on itself. So payload . again, and the document now on its own and . data. So this basically means I will return this data from a document as a to-do data to be the model of to-do. So basically now, this data will be equal to that right side in my cloud firestore. So I'm pulling the correct data back, but still, I don't have the ID to get the ID. Now that I have this data, we'll use data . ID here to be equal to the x. Again to my document payload . doc like this. And now . here I want to just have the data, but I will also have the ID, which you can see here. So . ID like this. And now that I have this data fully, I will just return data back. And with this, my to-dos will have correct data which will hold the ID title and completed values. And as I need to get to this in my component, I will create the method now after my constructor down here, I will put the comment of getting to dos, and I will create a method of get to dos. Here. I will just return this . to dos back. So I will use later this method in my component. So let's go in our component now. Here in to-dos, I will go into the component itself. And first of all, as I will work with the service in my component, I should import that service. So I will in my constructor use private to dos service to be type of to-dos service like this. I will auto import it at the top as my service is injectable feature, I can import it in, inject it basically in components. So here now I will have my get to dos method. I'll get to dos. It will be the method that will kinda use my to-dos service with this . to dos service like this and on to dos service, I have my method called get to dos like this. And as my data is observable data, I could subscribe to it, so subscribe like this. And I will get back a response from my for my data. And that's response will be the type of to-do, but to do array. So I will now use the arrow method here, and you can see the red line here. I didn't import my to-do model here, so I will just import it at the top. That's oaky. And here, now that I have subscribed to my get to dos, I could console . log to dos , response like this. Let's see what we get back. I will copy this, get to dos method fully and just paste it here with this . get to-dos. So once this component is loaded, once we are on to-dos page, this ngOnInit will run, and it will run this get to do's. This get to dos will run get to dos method in my todos service. And this got to dos will return this data to me, which I previously got from my to-dos collection from my Angular firestore. You can see how everything is connected together here. So now that I have everything here, I could use clear here and run ng serve on my side and run my app locally to check everything. Now that my server is up and running, I can copy this local host 4200 and go back into my browser, paste this local host here. By the way, if you are a fan of Naruto, This is pain basically, and I am back in my app. So I will inspect my app here. I will go to console here, and I will go into todos page, once I am there. You can see this log from to-dos. And there is our data. We have three to dos. Each of the data has the id, title, and completed values. So now that we successfully pulled the data from our fire store, cloud fire store, we can bind data data here in our lists, in our to-dos page. 14. Showing Todos on Web App: So now it is time to render our data from our to-dos component. So we get the data here. I will create here variable of to-dos, which will be the type of to-do array like this. And now here in get to dos, I will use this . to dos and bind it to response that we get back. I will also have a finished to dos. So finish to dos which will be again, the type of to-do array. And it will be same thing. this . finished to dos equal to response. Yeah, but you remember how our to-dos, will have two different lists. One is for finished to dos and second one is just for todos that are not yet finished. So let's filter our data immediately right here. So my response for my to-dos, I've used a filter on those and I will get to-do back from each to dos that I'm filtering. So I will return here just the to-do . completed, but which is not completed, which has to do completed, completed as a false. So basically each to do that is not completed will be in to dos array. I will copy this now this filter fully and each todo that is completed will be in finished to-dos array. So now in my HTML off my to-dos, I can work with that. I will here in my list of to-dos, I will delete this two list items. And here at the list item, I will use Directive ngfor, which is basically for loop for my to-dos. So I will loop through to-dos and I will use a let todo of todos. So while I'm looping through to-dos, it is giving me each to-do back. So here I can use instead of go to walk, I could use here todo . title. Yes. So it will basically loop through to-dos and it will render as much list items as I need as much as todos, as much to-dos as I have. So I will use copy this like this. Let's not do that as I have couple of other icons here. So I will use here again ngfor loop. And I will bind this to let todo of finishedTodos now. And this finished to do. We will basically do the same thing I will render to do . title here. And with this, we are fully finished. If I go back to my application, you can see that now I have two to dos that are not finished at the top and one to do that is finished at the bottom. So the data is there and it is successfully rendered on the screen. I cannot still update data at all or delete the data. I cannot even add data to, add new to-do in my to-do list. So let's work first with adding the data. 15. Functionality for Adding of Todos: So to add our to dos we will use section at the top of our to-dos page. So kinda hear at the header, we will add the to do title here in an input field and on a click of add to-do button, we will add to-do into our array down below this list. And also it will be saved in our database. So to work with the adding of to-dos, I will go into to-dos component here. And below my get to-dos, I will create a method add to do, so add to do will be a method basically. And it should get a title from that input field. So the title will be type of string. So now let's go in our HTML and pass that title. So here at the header, we have this input field and a button. So I could use here click event. And on a click, I wish to add to-do method to this to-do. I should pass a title. So I should get the title from my input field here. To get this title, I will use a local reference of to-do title. To put a local reference, we just use a hash. And then to do title with this local reference, we have a reference to entire input. So here now I can pass a to-do title like this, . and value on it. Also at the end here I will use a ; and put this to-do title . value to be equal to an empty string. Which means, let me also refactor this a bit. So you could see everything. Which means basically, once I click on this button, it will add a title, add to-do basically, but also after that method is finished. This to-do title input field, will return its value to the empty string. It will be empty again, so we could add another one. So now in my to-dos here. In add to-do, I should first check if this title is empty. If this title is empty, I should just stop my code from running. So I will run. If title is equal to an empty string, I will just return here. So everything else that if the title is correct, that code will be down below. Now to add my to-do, I should also create this to-do with this title. So I will create a const of to-do to be equal of, objects like this. It will have a title and this const to-do should be type of to-do like this. And it'll have a title which is title from a top. And also it will have completed, which is false. Once we add that to do, it will always be false as its still not finished. And finally, once I created this, I could hit my service now. So this . to-dos service . and I don't still have that add to-do method here, but I will use it, add to do like this. And in it I will pass to do from here that I created. So now let's go into our service and create this addTodo method. So in services here to do service, just below my get to dos I will create add to-dos and add to-do, singular. And I will create a method add todo, which will get to do itself, which is type of to-do. And this will be a method. So how could I add this todo into my Firebase, into my collection? So I will just use this . to-dos collection here and I will use . there is add method on it. I could use add method and I could just pass todo here. So now I will open up my cloud fire store here, and you will see my to-dos that I have for now. I will go back to my app and I will refresh a bit. Let's add a new to-do. So to do will be go to a class, hit enter. There it is. It is down below. If I check my cloud firestore, I could see a go to a class as a new to do. So. Now if I refresh the page, it will always give me back that to do as it is successfully saved in our database. Let's now see how could we delete our finished to-dos on a click of a trash icon here, right. 16. Deleting of Todos: So ideally, deleting of our to-dos should work like this. Once I click on this trash icon, I should pass the data from this to-do. And based on that data later, I will delete it, remove it from my database. That data should be to do ID, as that is always kinda unique. So now in my todos HTML, I could go to finish to dos. And on a click of this trash icon, I could run click, click event, right? And I will run a method called delete todo. To this, I should pass my to-do itself. I still didn't create this delete to do. So I will go to my to-dos component, and down here, I will run delete to do here. And I will get that to do, which is type of to-do. And now I could remove my data. Here in my component, this is not type of to-dos, but to do now in my component here, I will again contact service. So this . to-dos service, . delete to do. So I still don't have this to do. So I will just pass to do to my delete to do, as I still don't have it. So let's go in service and create one. So after my add to do in my service, I will create a delete to do here, and I will use this delete to do that I copied. And I will here get to do, which is type of to-do. And here now I could run logic to delete my to-do. As I need to delete my to-do by an ID, I will contact, I will now use this to do document. So here I will use this . to do document that will be equal to this, . fire store ., on fire store. I have document method. So this document method will contact collection that I wish based on a ID of the document and it'll give me back that document fully. So here I will use a back ticks and collection name is todos/. And I will use a placeholder here from JavaScript, and I will use to do that I passed here .id like this. So now my to-do document is recognized right? So now I could just use this.todo document Dot, and on it I have a delete method and that should be it. So I am in my to-dos page, I have a buy a T-Shirt finished to do. So if I find here buy a t-shirt, and if I would go to my page and I click on my icon, you can see that, that kind of already disappeared. So if I refresh the page, it is not there. Also in my database, it is not there. This is a wash a car. This one is go to store and this go to a class. And with this we have just one more functionality to do here, and that would be our updates. So once I click on this empty box, it will finish my to-dos and move those into finished todos array. 17. Updating Todos: So I will go back into my todos HTML here. And once I click here on my icon of square, I will run a click event listener. That event listener, will run a method of edit to do, and it will pass to do to it. I should create a this method now in my component. So here, edit to do, it is getting to do from my HTML which is type of to-do. Again, I write to dos, to do like this. And now I could reverse its completed value. So to do, dot completed will be equal to reversed to do, dot, completed like this. By the way, I will go back into my HTML. I should be able also to click on Finish to doshere. 00:00:49.940 --> 00:00:54.185 And move them back into unfinished to dos. So I have my logic for reversing that. Now it is time to contact my service again. So this dot to dos service dot edit to do, which still I didn't created. And I will pass this to do to that method. So let's create this method. Here I will use Edit todo comment. Method is called edit to do it is getting todo from my component. And these to do will be type of to-do. And inside, I will use the same thing as in my deleting. So I could copy this from above, here. So I should get my to-do document from my fire store to-dos collection. And I am getting that based on ID of the todo. But now instead of deleting to-do, I should pass here to do document dot update, and I should pass my new to do here. So as I am in my component changing the data to reverse the data. In my service, I'm kinda sending that to do with reversed the data. So it will save incorrect way in my database. So now if I refresh a screen and I tried to test that, go to a store click. It is in my finished to dos. If I refresh the page, it is still in my finished to those. If I find my go to a store, and here it is, go to a store has now completed a set to true. So it basically works. So if I again refresh the page, it'll always pull that go to store as a true value as finished value. So I could again put, wash a car as a finished, go back, find that wash your car. You can see that it is true. I could go back and put these goal to store back to un to-do list. So it is here now, right? So back, go to store has completed of false. So everything works fine. 18. What we Learned and Testing: So we fully created our application right now. We have our components here. We have a routing which is fully integrated. We have a data from our Firebase which is working. We could add a new data, new data, add, it is added, we could complete our to-do. We could delete our to-do. We could go back to home, go to to-dos, our routing is fully working, and our todo app. If I go to project overview, it is fully set up on a Firebase and it is fully connected to our to do app on our Angular side. Now, there is just one thing to finish. We can now work on Firebase Hosting and push our, our entire app to hosting on Firebase and see it live. 19. How to Deploy App to Firebase Hosting?: So to start with our hosting right now, I will click here on get started. I'm by the way, in hosting section of my Firebase. So get started. So here it is. We first need to install globally Firebase tools. So I can just copy this, nice animation here. And I could go into my console. So in my console, let me clear it a bit, here. I could install globally Firebase tools. I by the way, have already this installed, but I will install it together with you so you could see the whole procedure of deploying to a Firebase. Once this is installed, I can go back to my Firebase hosting here, and I could go to next step. So first of all, we should login with our firebase account. So let's copy this Firebase login here and paste it like this. I should already be logged in, so I am already logged in, but I'm logged in with different account. So I will log out like this firebase logout, and I will logged in, login, login again. So it will ask me a couple of things. I will just allow those. It will move me immediately into the sign in of a Google account. So I will login, with my email, here. It will ask me for a couple of accesses. I will give that and Firebase CLI login successfully as you can see. So next thing, I could use Firebase in it. So I need to initialize my application as as application on my Firebase. So here let me also clear this a bit. So Firebase initialize and it will just initialize the whole app. So first of all, it will ask me if I am ready to proceed. Yes, I am. Here, I will choose which future I wish to use from Firebase and that is hosting. So I'm come to hosting space and enter. So it will ask me to create a new project or use the existing one. So I will use existing project, It will bring me back my project. So I will use my to-do app project here, like this. So we need to pass, what do we wish to use as our public directory? So here we will use the dist folder like this. And as we will build our application in dist folder, so hit Enter. It will ask us if we wish to configure this application as a single page application, Angular creates the single-page applications, so yes, for this also, and you can see that Firebase is finished like it's completed. So now we could set up everything else. So with this, we can run Firebase deploy, but before that, we need to build our project. So for a building I will go first to Angular JSON here, you can see that output path of a building of a builder will be dist / to-do app. And you remember that we past this, dist just as the dist folder. So 1 second to check, if I have everything setup correctly, yes. And now we could build our application. So now here I could clear this a bit and use ng build --prod. You don't need to use --prod, but i will build my application for production environment as it is the same environment as my staging environment, my testing, coding environment. So this built will take a couple of minutes but, Now what is doing? It is compiling everything that we have. Angular itself, it is compiling everything that we have and it will build the whole application for us, to be used as a JavaScript application. Basically, as you know that Angular is a JavaScript framework. So once this is finished, I will be back. So everything is finished. We have our JavaScript files, which are bundles from our angular application. And now we could run just Firebase, deploy like this. It will take some time, but it will grab our application and deployed fully to our hosting that we already set up. It's finished. Now we could go to our hosting URL. So I will hit Control and click here, and it should lead me to hosting URL. So here, you can already see that I am currently on my hosting URL. I'm not on my local host, Right? So I could go to about, that's what we have for about. This is to dos. And you can see that our hosting is fully connected. So we kinda deployed our application to hosting of Firebase and it is fully working with Firebase cloud database. So here now, as we finished up with hosting, we could just continue to a console and now on a hosting, we won't have that setup part, but we will have our hosting itself. So you can see how am I connected, current_user. There is also application that should be visited, that's it basically that we already have. And that would be it. Here you can add your custom domain if you have one and work with that. a bit also. 20. Thank You and Goodbye: So here we are. Congratulations to you. You will successfully created your to-do app with Firebase and Angular. You so how could you use Angular, its components, services, and routing. You also set up your Firebase, Cloud Fire Store for your database on Firebase. You created your Todos collection there. You rendered those todos in your app. And also you were able to add, delete and modify data of those todos. And finally, you were able to deploy your whole app to Firebase Hosting. Important note, in the future, you can expect more, let's code courses in this series from me. So be prepared, as soon you will get another one live. For this one, you could let me know what you liked and what you didn't like through this course. You could even leave your honest review for this course. And that way help me in creation of next, let's code courses in my series. Once again, thank you and goodbye.