Angular Tutorial for beginners step by step (from scratch)

what's going on guys today we gonna be building this angular to do that from scratch so let's get started before we start if you are new to my channel please subscribe and don't forget get the notification bell icon so let's create a new angular using the angular CLI if you don't have installed angular CLI just go to this angular CLI website CLI dot angular dot IO and simply follow this first command that's it you can check the sea elevation by running this command in your terminal or command prompt LG version at the time I'm recording this video the angular CLI version is nine point one point four if your version is lower than this oh maybe your installation is outdated you can upgrade the version by simply reinstalling the angular CLI just simply run this command you if you own a Mac before you type this command add sudo beginning of this command so the modified command will be looked like this sudo NPM installed - G act angular slash CLI otherwise it will show a security permission error this is only for Mac users if you're on a Windows no need to modify anything just simply run this command on your command prompt that's it alright let's create a project folder so for this tutorial purpose I am going to create my project folder inside my desktop you can create your project folder wherever you want and it's up to you if you want you can follow me so right click on your desktop NIF folder and rename it to UT projects now open the terminal or the command prompt navigate to the project folder CD desktop CD UD projects and run this command to create a new angle app energy new and the app name in our case we are creating a to-do app so the app name is to do hit enter yes of course we are using the angular router so curious to this selected CSS as our styling method and hit enter all right Oh angular to do a piece cooking this may take several minutes depending on your PC and internet speed so why is this installed I give you an idea of what you are going to build in this tutorial as I mentioned before this is a to-do app where we can manage our simple two days so in this app we have to do categories we can create delete update categories and we can save introduced under each category so inside this to dos we can mark uncompleted produce as completed completed to do as run completed and also we can edit delete and save introduced all right so we are using firebase file store database as our back-end database I think most of you already know about this firebase right Wiress is a back-end service for mobile and web apps so it has so many inbuilt features like real-time databases cloud functions analytic tools testing tools push notifications authentication and hosting likewise so many features are there so this firebase has free time which is very helpful for startups once you have grows you can a whole right and also firebase is developed and maintained by Google ok so I have divided this tutorial into three sections in the first section we will be designing the entire to do have using the bootstrap and with some custom CSS in the second section we will be writing some codes to handle our back-end process we will connect the app to the first row as I mentioned before file store is a back-end database service that is one of the service offered by the firebase and it is free then we will do some formal editions also we are going to use some of third-party NPM plugins to show loading steps and pop-up notifications so I think that's it for the second section in the third section we'll be building the to do up to the production and also I will show you how to deploy the app to the firebase hospital all right Oh angular to do app is cooked and ready to serve open this up inside your favorite code editor I am using vs code so I am opening this project inside EVs code beautiful now let's run this newly created angular app to do that open the integrated terminal inside we scored go to weave and terminal or you can use this keyboard shortcut inside the terminal run ng serve alright Oh AB compiled without any problem so now open your browser and go to this URL setp : that was slash localist again : 4200 and we can see this default and give aboard epically so now let's dive into our first section so let's start design India to design we're gonna be used bootstrap as our main CSS framework most of you already know about bootstrap right if you don't know about go strap so you can simply go to the gate bootstrap calm and follow this documentation it is easy it's just a simple CSS framework with a bunch of CSS classes let's set the booster to our angular app using the NPM create a new terminal by clicking this plus icon then run npm i this I stand for installed then type bootstrap and press ENTER once installation completed import booster file to our project then only we can work with booster open this angular or JSON file inside go to this CSS section and yeah import the bootstrap CSS file by adding this path not underscore modules slash bootstrap slash list / CSS slash bootstrap dot min dot CSS so I use the minified version of bootstrap CSS this will speed up little bit I save this file and to load these changes we have to restart there go to the terminal that our project is running we can switch between terminals with this problem control C to stop the app and again run this command in G surf to restart the app alright for now how project basic settings are done let's get started to the design process by creating the angular components so in this to-do app the first page will be the category page you can see in this wireframe we have a nav bar and the footer an if category form and down below I am planning to show saved category list in card style with some random color top borders so if I click one of this category card this will openly to do page and this will show the list of todos saved under this category and also here we can see the never component and as well as a footer component so to-do app components are the main app component neighbor component and the footer component these two components will be shown inside these two pages and the category component and to do component all right let's create the components using the angular shear line type is command inside the terminal switch back to this terminal and run this command ng T G stands for generate C C stands for components and give the component path and component name so I'm gonna put header and footer components inside the layouts folder so type layouts slash and the component name number and press Enter you in our component is ready go to the file structure and open the app folder inside we can see this layouts folder open this and inside that we can see our newly created navbar component alright run the same command to create the footer component this time component name will be footer all right footer and neighbor components are ready we have two more components to generate this category component and the total component again run this command ng D see this time I am NOT going to put these components inside any subfolders this will be generated inside the app folder so I type only the component name here category and press Enter alright category component generated again run the same command this time component name will be 2d alright we have generated all of the components so now let's get busy with some coding so now open this up load component HTML file and clean this up remove this hole and place the navbar and footer component here you save the file and get back to the browser in here we can see new bar works and this footer works actually these are coming from our components open it Snowbird component HTML file this is what showing inside the web browser so which means everything is working perfectly some of you new to angular may be wondering how do I add these tags at - neva and this HAP - footer this is simple you can see the HTML markup that for each component by opening the relevant component of TS file so in our case open the inner bordered component or TS file in here we can see the selector help - now but if you want to show this component in your weave we have to use this selector open this corridor component or ts5 in here you can see this selector yep - footer so this is how I added these tags to the app load component HTML file hope you guys got the idea right so next let's add the plots to show these category and of total components open this app - routing got more yield OTS file inside this array let's add our first router so first end a curly bracket here inside these curly brackets the first value will be the path I'm going to add the empty path here an empty path will represent the default URL of the app in our case angular to do app default path you are release localhost colon 4200 if you load this URL inside the browser angular shows the wave of this app after component of html5 that's why we are seeing this navbar and footer components here so now I want to show the category component on my default but to do that get back to the F dash routing dot module OTS file as I mentioned before this empty path represents our app default URL in order to show the category component on default path URL we have to pass another value here this value will be the component so type component colon and category component while you type this you can see this autocomplete suggestion selects that we can see here this will automatically import the part to that category component if you don't get this cuto complete and this auto import path no worries just simply type this path now save this file and go back to the browser this is not working if it's work this will show this category works text inside the browser oh I did a mistake here I forgot to add the router outlet so add the route outlet between this number and footer components save this file and back to the Boston beautiful now we can see this category works text here which means we have successfully entered the category component to the default URL next let's add the to do router again get back to the app - router dot module dot T is five and the copy and paste this line and don't forget to add the comma here change this path value to do and change this component to do component and again select the autocomplete which will automatically import the path to this to do component save and get back to the browser and end of this default URL add a to-do route or todo route is slash to do and press enter so now we can see this true to works so routers are working perfectly all right until now everything is working fine now let's add some starting to these components well we start with the noble component so close this all and open the now added component dot HTML file create a header tags between these header tags created do HTML tag with container bootstrap class I am using Emmett here so the dot container this div is the HTML div tag and this dot represents the class and this will be the class name container and press the tab key on your keyboard beautiful then create another div with these classes div dot row and again brought justify - kontin - md - center press the tab key ok now we can see this newly created deal with these two crosses like this we can create a div with multiple classes between this fro another deals dot call - md - photo inside this call Aaron h5 tag and inside this h5 type to-do app this h-file tear gas - classes text - primary and branded text this this text primary is booster class and this brand is a custom CSS class save this and get back to the browser here we can see our simple now bar with basic bootstrap styling let's add some custom CSS to this nav bar open this now bordered component dot CSS file now we are going to end some styling to a header tag type header and add the scope inside this set hi 200 pixels padding-top - 30 pixels padding-bottom 220 pixels add margin-bottom 50 pixels let's have some shadow to this Nova we can generate the drop shadow CSS codes using the help of an online tool open a browser and go to this URL CSS Matic dot-com slash box - shadow with this tool we can generate the drop shadow CSS code according to our preferences on the left side we can see the editor and on the right side we can see the preview of this shadow set horizontal length to zero vertical length to 0 set blur radius to around 33 pixels if you notice when we adjust these settings we can get the real-time wave of the shadow in here so we can get a clearer picture of what they are doing here set spread radius to minus 10 pixels add shadow color to ash 4 double 7 to F II this background color and box color keep it as default don't change anything set the opacity to 0.3 and now we can see this photo generated CSS code for the drop shadow according to our settings it's cold right now copy this code and paste inside header CSS save and get back to the browser so here we can see the shadow now let's add some styling to this app name so back to the es code I already set the custom CSS class for this app name that is branded inside the never CSS dot brand and this code inside the scope set background color as f3 f6 double F and padding top and bottom will be 10 pixels and left and right will be 50 pixels border-radius 250 pixels and make the courser two-pointer okay now burr looks great let's move on to the next component footer component photo also the same as this never there is not much difference open footer component of the HTML file and go to this navbar component HTML file and copy this all and paste it inside this footer component STL file and change these header tags to the footer types and add the P tag below this h-file tag and add this copyright text type copyright and the copyright symbol type 0 1 6 9 while pressing the Alt key then release it then type to do have and also change this h-file to h6 tag and add this text - Center class - this live copy this header tag CSS open footer door compound hundred CSS file and paste it here change this header to footer save this handle back to the browser beautiful footer looking great open up that component dot html' rub this route outlet with container class created a with a container class live dot container press step put this router outlet inside this container and also wrapped this container inside another div create a div tag and put this container div inside this div at the custom CSS class to this div happen open after component of CSS file let's add the CSS style to this app plus dot tap inside this min height the very will be hundred eh save this and back to the browser if you noticed we can see a little margin below the footer to remove that go to the footer CSS and remove this margin bottom value safe and back to the browser beautiful alright everything looks perfect now let's design the category component inside this category HTML file create a deal with this 3 booster classes div dot row again not justify - content - Center dot mb - 3 press enter inside this div add another column with text - Center + div dot fall - md - faux dot text - center inside this create an h1 tag and type to do categories inside this h1 tag all capital letters down below just add the P tag with class text - info between this P tag at the dummy text lorem and select this photo complete enter save and back to the browser this dummy text does not look perfect demo bit text from this attack then save it back to the browser now looks perfect okay let's go the new category form area create a deal with bootstrap class for inside this div create another div with bootstrap class called - MD - 12 inside this called a create a form with bootstrap class form - in line inside the foam create a div with class call - and a dashed in and form - group inside this form group add an input tag the type will be 'text and the placeholder add new categories here in good name will be category name and this in will be capital and add this booster class to this input field form - control - plain text next we need to have a a submit button so create a button tag and type will be submit and at this class button BTN BT in - primary called - MD - - and also this custom CSS class b TN - to do and the en - block between this button tags type ad save this file and back to the browser and it looks like this with the default bootstrap styling let's add some CSS to this form to style this input field open category dot component of CSS file input square brackets type the equals sign and our input type is text then curly brackets at the background color to ash Effie Effie Effie height will be 60 pixels padding left will be 20 it sells then at the shadow as I mentioned before you can use the online tool to generate the drop shadow so this time the drop shadow will be same as din f ba so copy previous now ba shadow and paste it here save this and back to the browser perfect we are now done with the text field at styling let's add some style to this button inside the category CSS file our custom button CSS class between - trudeau inside this height will be 60 pixels background color is Ashe e9 double e double F and the color Ashe for double 7 true f e set border to none and also at the same shadow to this button too save back to the browser looks perfect as we planned if you noticed we have used the same shadow in several places inside this now by CSS again inside this photo CSS and again pro times in this category CSS repeating the same code again and again this is actually not a good practice so what we can do here is we can create a global CSS class for this shadow CSS and we can import that class whenever we made a drop shadow in angular every component as its own CSS file you can see in this tree now as its own now bar CSS file the footer as its own CSS file likewise every component as its own CSS file if we add some CSS in some of these components CSS files this CSS style will only apply to that relevant component only for example if we add some CSS on the neighbor component CSS file this will only apply to that now bar component this will not apply to the footer component or any other component so if we want to create a global CSS style in angular we can use this Styles dot CSS file inside this Styles not CSS file create a class for the global drop shadow dot drop - channel and this Co place this drop shadow code inside this global style and save the file now remove all the other drop shadow codes inside now bar component CSS file remove it inside footer component CSS file remove it and category component CSS file remove these two shadow quotes save everything and back to the browser now we cannot see the drop shadows now let's import this global drop shadow class the components inside the nagua we want to show a shadow on the navbar so add class inside this header tag class drop - shadow safety fide beautiful now we can see this shadow as previous do the same to other components as well add drop - shadow class - footer tag and inside the category component for now we have to add the structure now in two places one for the input tag and another one for the button save all files and back to the browser everything looks like previous is cool right and also always remember to learn smart not hard let's design the category cons at this HTML codes inside the category that component additional file create a div with a class and categories - list this row class will be booster class and this category - list is a custom CSS class inside this another div with class call - MD - three inside this call another div with the class card and again inside this card another div with class card - body so inside this card - body div with class clear fix booster class to position the category label and the edit delete button left and right in one line okay inside this clear fix a div with these classes float:left booster class for position this left left side inside the card body and another div with these classes badge badge - primary the text will be category all capital letters so again another diamond set display effects the class will be flawed - right and create a custom class cat - tools for custom CSS this floating disc right bootstrap class will position this on the right side of the card body now we have read edit icon and delete icon for that we are going to use font awesome icon library to get the library open this site font awesome calm and click this start for free and select this NPM to install font or somewhere and p.m. we can use this command copy this command by clicking this icon and paste it inside the internal command prompt enter this will install font awesome icon library this may take several minutes depending on your internet speed now add the font awesome import to our project to do that open angular dot JSON file and add this line under this style note underscore modules slash at fort awesome / font awesome - 3 / CSS / all dot CSS in order to work this input we have to restart this ng self-control see stop currently running server and again run ng surf okay let's continue our coding back to the category dot component of HTML file inside this cat toes Dave had the small tag I want to be this icons smaller so I added this small tag and I tagged with fa fa - pencil - alt and text - success classes this FA and FA - pencil - alt + imported from font awesome icon library and this text - success from the bootstrap framework add another small tag and I tagged for Delete icon classes will be a face fa - trash and text - danger as I mentioned before these two classes from font awesome and this is from both strap alright next inside this card body div additive with the custom CSS class to do - content and then it's retag inside this live to show to do category name for now let's make it static don't worry in the later sections we will be making this static layout too dynamic why are loading data from fire store data this so add a simple category name inside this h3 tag I added category next add a small tag with the class text - secondary and after some dummy text inside this small tag type lorem and press Enter next started to do is count area to show total to do counts saved under this category span with booster process batch batch - danger inside this span type-3 - produce all right we are done with the category cards save it and back to the browser it will be looks like this without custom styling let's set some CSS and make this looks awesome open category dot component dot CSS file dot card curly brackets set the border to none border - left - 5 pixels solid and the color will be ash and four zeros at the end this color will be dynamic for now keep it this way margin - top 50 pixels okay save it and let's see how it looks like looks okay but we have to add the drop shadow to discard so we already created global CSS class for the drop shadow so no need to write any CSS codes for this shadowing again back to the category component HTML file and add this drop - shadow class to discard diff save this file and back to the browser beautiful actually this Nami takes not looks good so remove be text from it save and back to the browser code okay let's design these badges types of badges I am using with this project is match primary and vege danger okay match primary background color will be a sh e 9 double e double F and color will be ash four double seven to F E batch - danger background color ash fe f 0 f 0 and the color will be ash f 0 4 1 4 1 save and back to the browser looking awesome let's add style for updates and delete buttons for this I have given a custom CSS class cat - tools back to the CSS file dot kept - tools display:none it will be visible meant it over the card dot cat - tools hi this tile for the I tagged margin:0 pixels for top and bottom five pixels for left and right and cursor:pointer dot categories - list dot card : over curly brackets cursor:pointer background - color Ashe f8f8f8 next dot category - list dot card colon hover dot cat - tools inside the scope display:inline save it and back to the browser and also at the top margin to this badge inside this category CSIS batch - danger class and margin - top 250 pixels and also at the lift drop border radius - this card inside this card CSS class add this border - top - left - radius 30 pixels safe and back to the browser everything looks perfect alright let's move on to the next and the final component to do component in the to do component also we have this heading extended this form area like this category component so copy B's heading area and this form area place it inside the to do component HTML file and change this little category to produce all capital letters and inside this input field change this placeholder and input name will be to do text and this T will be capital save this n back to the browser and navigate to the to do router slash to do we can see as previous the basic Gustav's trial for this phone our custom form style is not working why is that because this form style is inside this category component CSS file the CSS only works with this category component only so in order to work this in a Trudel component we have to put this CSS inside D to do component CSS as well copy this input and button CSS from category conferences and paste it here inside these to do component CSS file save this end back to the browser perfect all good wait before we move on if you noticed again we repeating the same CSS code inside these two components this is not good right so light drop shadow we can make the CSS classes global copy this input and Martin CSS and paste it inside this Stiles dot CSS file and remove these CSS codes from category component CSS and Trudeau component CSS save this and back to the browser if you notice here text phil' CSS is applied but this button style is not applied to fix this back to the Styles dot CSS and add this important to all this ties inside this button - true save this and back to the browser everything working perfect next let's create D to do paths open to do the component HTML file and add these tags create a div with class row and to do - list custom CSS class inside this div create another deal with these classes dot call - MD - 6 dot justify - content - Center inside this div create another div with class card and inside this card div with class card body inside card body create a clear fixative and inside this div create another div dot plot - left dot text - secondary inside this create I tag with FA our fa - circle text - danger this affair and FA - circles class coming from font awesome icon library and this text - danger coming from bootstrap after this float - left deal create a deal with float right class inside this I tagged with the class's affair FA - check - circle next - success and again another I tagged with these classes affair fa - times - circle and text - danger after this create a div with to do - tolls custom CSS class inside this div I tagged with these glasses a face fa - pencil - alt text - warning and again another I tagged with these glasses a face FA - trash next - danger and put these eye tags inside small tags save this and back to the browser here we can see the to do card with the simple bootstrap styling but we have a small problem here this to do card must be in the center of the page so let's check the code oh I did a mistake here this justified - container - centre class must be with this raw class cut it from here and paste it inside this row this and also remove this s this must be to do list save it now we can say this to do card is on the right place let's set style into this to do cards open up to do Road component or CSS file inside this let's add a margin up to this to the list the true - list margin - top 50 pixels next dot to do - list dot card and the scope inside this border will be none set margin - up to 5 pixels and set background - color - ash f8f8f8 next to do - tools make this display:none this to do tools will show when they to do cards for and again not to do - tools and I this is for the eye tag which is these to edit and delete icons inside this margin top and bottom will be zero pixels left and right will be five pixels and make the cursor:pointer save and back to the browser beautiful let's set the over style for this to do cards back with a to do component CSS file though to do - list face dot card : oh and they scope inside this cursor:pointer make with 600 pixels make height 80 pixels margin - left - 30 pixels border - top - left - radius 30 pixels and border - bottom - right - radius 30 pixels save and back to the browser Hova style is working perfectly let's add the margin to this icon and also if you noticed we cannot see the edit and delete icons to fix that back to the to do component CSS file and add this so to do - list dot card : power and again to do - tools inside this set display - inline and also add the margin for the eye tag I and the scope inside this margin - right - 20 excerpts save this and back to the browser beautiful so our to-do component style also the done now let's head back round image open the link in the description below download this image you and put it inside beauty projects to do SRC and assets folder and again back to DVS code and add these tiles inside the Styles dot CSS file background - image URL and brackets at the path to the background image inside these brackets single quotes inside dot slash assets slash background dot PNG then make background disposition to Center background - repeat - no repeat and also background - sighs - cover save this and back to the browser beautiful all right now we are done with our first section next let's move on to the second section first thing first we have to create a fire base account go to the firebase google.com and click this get started button and log in to your gmail account if you don't have one you can create a new account with this I already have an account so I am logging in to then gmail account so now we can see this welcome page to create a new firebase project click this button add a project name here you can add whatever the name you want I just had to do cause our app is a to-do app down below we can say this photo generated project ID if you want you can edit this project ID by clicking this pencil icon I am ok with the project so I am leaving that as it is click continue in the next page we can see this analytics page we can enable/disable Google Analytics by default it's enabled so I am keeping this enabled click continue and take these two equipments then click create project you all right firebase project is successfully created now click continue now we can see our project dashboard on the right side we can see lots of options but in this tutorial we only use this database and hosting sections only go to this database and click this create database button in this tutorial we are not going to do any authentication so select this start in dist mod if you want to learn more about authentication and these security rules let me know in the comment section below and click Next here we can select the cloud the file store location I am keeping the default location and click done this may take 20 to 60 seconds ok our cloud file store database is successfully created now we have to connect our angular to do after these 5 days to do that go to this project overview tab and click this icon here give a nickname to the app to do app keep this antic we'll set up the firebase or staying on our next section click this register app and copy this config data back to the vs code and open this environment the TS file which inside this environment folder after this create an environment variable firebase config this C will be capital and inside this paste copied firebase config data and save this okay we have created the firebase environment variable now we have to connect our angular app to firebase to do that we are going to use an NPM package called angular fire search angular fire on Google and go to this lead hub page here you can find all the information about the angular fire go to this QuickStart guide copy this command and back to the es code paste copied command inside the internal terminal and press Enter so after installing the angularfire install another NPM package NPM I firebase press enter okay next let's set up the angularfire open this F dot module store PS file and import angularfire module type import curly brackets inside this angular fire model follow this capital simple letters carefully then from double quotes or single quotes inside this type at angular slash fire and also import the environment five is conceived variable so again import curly brackets inside this environment from single quotes a cersei / environments / environment then go to these imports inside this ad this angularfire model not initialized app inside the brackets environment dot firebase config this is our firebase config variable we connected to firebase so we are using fire stock in order to use fire stove with the angular lab we have to import fire stove module as well go to the import section and add this import statement input inside curly brackets angular files tow module from single quotes at angular slash fire slash fire stove and back to these inputs and add this module angularfire store model after these five bass in quotes just restart the app go to the terminal control say test of the running server and again run ng serve to run the air all right we have completed the firebase and a file store set up next let me give you a quick intro about the file store database so heist Oh is crowd no SQL document based database this is different than the traditional table based database like SQL database so in SQL database data saved in a table but file store database saved data in a document so what is a document it is a group of key value pairs for example details of a user a the name is user a gender male and age 30 you can see here this is the key and this is the value and this is a group of key value pair this group of key value pairs we can call this document group of these documents we called collection in our example we have a group of user details documents so this will be users collection hope you guys got the idea right in a document we can also have only one key value pair there is no limitation for this in another document we can have different types of key value pairs in Feist oh we can stow string values number values boolean values map Coordinates arrays timestamps geo point values references and also we can store null values how do we add relations in a cloud faster think if a user has many hobbies how do we add multiple hobbies in the document in the SQL database we have users in a separate database and we can store Obie's in another separate table by importing the users ID we can connect each other tables in noise QL databases also we can do the same we have a users collection every each document has its own unique IPS and also we can add the hobbies collection and create a document for Bobby and we can import the user ID to connect each collection but we can do this in a better way in a file store we can create a collection inside documents if we take the same example take this use a as two hobbies one is reading books and another one is watching movies we can store this data by creating a hobbies collection inside this user collection this Obie's collection has two hobbies one is reading books and another one is watching movies if the user has three hobbies we can save that again another Obi's collection for this user document and inside this Obie's collection three obese documents one is traveling one is sleeping and one is playing games if the user C doesn't have any obese no problem we can leave this empty so hope you guys got the idea this is just a simple example if you guys want to learn more deeply about this file stop let me know in the comment section below now let's plan our to do first or database in order to do em we have to do categories each category has its own list of two DS we need a categories collection this collection will have lists of category documents so documents case will be category color - code and to do count this category is the category name so for example category Jim this color code is when we save our new category and planning to give a random color for this category so when we load this list of categories on our fronted we can show a random border colors to that category card using this color code if you don't get it just leave it you will know when we get to that part and the to do account by default this will set 0 when you save an if to do under this category discount will increase so these category documents as its own produce so like previous Obi's example we will store these students by creating a collection inside these documents so that collection name will be reduce and that collection will have to do documents so this document keys will be to do and is completed so this to do value will be simple to do like do ten push-ups and this is completed value will be a boolean value which means true or false if this value is true this means we completed this to do if this value is false which means we are not done with this to do simple right this is it for the data based planning let me show you this action by adding a data to fire store database using the firebase dashboard go to the firebase dashboard and go to this database tab and click this start collection so a collection name will be categories and select next now this will ask about this document keys and values so in our case we have category and type will be string and value will be like our example Jim and again click this add field and our next field is color code this C is capital and data type is string and value will be add a random color just add ash de 28 28 and again we have another field the field name is to do count and again this C is capital this type will be number and the value will be 0 and now click this safe perfect we successfully saved our first document inside the file store so here we can see the document in Pashto each document represent with its own unique ID this column will show the list of documents this ID will generate automatically but if we need a custom ID we can generate that by ourselves inside this column we can see our document fields and values next we have to do as we planned previously we are going to add that produced collection under this document so this time click this start collection not this one this is in the main collection tree and this is this sub collection tree for this document click the start collection and again give a collection name this time this will be produce and again add fields for this to do document to do the type is string and value is do 10 push-ups next is completed select boolean as the type and value will be false so now we can say this to those collection and it's document and its value is like 3 vs categories collection if you noticed this traduced collection is inside this categories collection not only that also this traduce collection inside this document as well ok now let's save a category using our angle app there is two forms type in angular reacting forms and template driven forms I am going to use template driven forms for this tutorial alright before we start we have to import forms module go to app dot module start ES File and add this import import curly brackets inside the curly brackets forms module this F and M must be capital then from single quotes inside these single quotes at angular slash forms and add this import under this imports forms module save this file and now open category dot component or HTML file and remove this action inside this form and add this as if equal sign and NJ form inside quotes this form F must be capital and also this F can be any name then add the brackets inside the brackets ng submit this s must be capital cubed minus equal sign and curves inside this we are going to tell what to do then this form submitted so we are calling to a function so add the function name here on submit don't get confused this function is not coming from angular we have to create this function manually right and also this function name can be anything but remember to give a relevant name so this function is for form submission that's why I gave this name on submit which makes more sense right now openly scattegories third component of TS file and the create the function con submit and the parentheses then function scope inside this added console locally check whether this function is working or not console dot log inside this just love working save this and back to the browser and open the console to do that right-click and inspect element and select this console then flick this form Add button here inside this browser console we can see this log working so one submitted function is working let me quickly explain what is happening here when we click the submit button this will call this ng submit so in our case our ng submit function is this on submit function this will look inside this categories third component roti is file there are any functions declared named upon submitting if any this will run the function if not this will show an error for now remove this function and save back to the browser and click this button again here we can see this error saying that on submit is not a function so and also a inside this internal terminal also we can see the same error also we can see the error line number and the error place this is cool right again keep this as previous and save it's working now we can see this working log inside this console alright hope you guys got the idea so now we have to pass the foam input value to this onsubmit function to do that pass this ng form parameter to on submit function for this I added F so passed F here if ng foam variable is any other word like or later like B then pass your B this name and this parameter must match each other after that we have to bind this input field to this form so ad ng-model inside this input this M must be capital save this and open the categories component ts5 we are passing a parameter from form to this unsub with function so now we have to catch that so inside this parenthesis create a variable to catch that parameter I am giving F as variable and the type will be ng for and select the photo complete this will import the path to this ng form now console lock this F save this and back to the browser type a category here something that you want and the studying category and press this button now we can see lots of output inside our browser console for now we only use this value object inside this we can see the input field name and the value to get this value back to the TS file and after this F add the value safe and back to the browser again type something inside here and click this button now we are getting only deform values instead of the previous big object so now let's save this value inside the file store data this to do that we have to generate a service file go to the terminal and run ng G is this G stands for generate and this is stands for service and give the path and the service file name so I am saving all the service files inside a service folder so service slash and service name will be category and press Enter alright how service file generated open this category door service the TS file and we have to inject angularfire store through this constructor input curly brackets inside this angular fire stove and again follow these capital simple letters carefully then from single quotes inside at angular slash fire slash fire stove then inside this constructor inject this angular fire stove so private AFS : this can be any name and angular files to the starting a and this F must be capital so now create a function for saving category after this constructor create a function called safe category then thesese and the function scope to save we have to pass the form data to this function so at the parameter called data okay now inside this call this injected angularfire stop this dot AFS dot then collection brackets inside these brackets pass the collection name as a string so courts and the collection name we are trying to save the dysfunction is a category so our collection name is categories if you can remember we created this collection inside of hi stove manually so this is the correction name then we are saving data so dot add brackets inside these brackets pass this parameter value then add the callback function dot then brackets inside brackets ref are EF and arrow function inside this log the success message and don't forget to put the semicolon end of this line so now we have to call this service function when we click this Add button we already add this on submit function so from this function we can call that service function to do that we have to inject the category service file to this category component constructor at this import statement import curly brackets inside category service the CNS must be capital from single quotes double dot slash services slash category dot service and inject this category service inside the constructor private category service and category service look at this naming convention the variables first letter is simple and imported service modules first letter is capital this variable can be any name that you want but this module must same as this import next let's call the safe category function from this consummate function type this category service but now we can see this safe category function on auto import selected and fantasy's this same category requires the data parameter so pass this F naught value to this parameter save this and back to the browser and type a category name like something grocery and click this Add button inside the browser console we can see this success message which means category data saved successfully in the file store to double confirm go to the firebase dashboard and go to the database beautiful we can see our newly created category if you noticed here in this newly created category document is not according to our database plan we can see only the category value we cannot see color code and the total count values why is that because we only passed this category form value to this save function so once again lock this data here and comment this line say van back to the browser type something inside this category input and click this Add button now inside the browser console we can see only this category name value so that's why we are getting only the category value inside our firebase document so now let's create an object including the color code and the to do count values inside this onsubmit function let produce category this C must be capital and assign and object category and the value passed this form value has category then color code for now and this color code ash see it see it see it later we will save some random color using an array next have this to do count the default value is zero now pass this to do category object instead of this form Valley you save the sent back to the browser and now save a new category this time say something kitchen and click this Add button and we got the success message inside our console which means the newly created category saved inside the file Stowe successfully go to the forest Oh tab this is our newly created to do category so this time we got this color code and to do count already get back to the EVs code and create an array for color codes inside this class cope create a variable color and this color variables type will be array and give the array type any and assign these colors error I just copy and paste this this array has 15 color hex codes and this is optional you don't need to copy the exact these color codes you can create your own color codes array I took these colors from website called color hunt got CEO just click one of this X code this will copy that color X cord to clipboard and you can paste that color inside the array likewise you can copy as many as colors as you wish if you want to copy the same color codes as mine so pause the video and copy it so next what I am going to do is taking a random color from this color array and passing it to this color code first let's generate a random number and then we can get the color code array value for that random number inside on submit function create a variable let random number then assign in JavaScript we can create random numbers using this function math this M must be capital then dot random and brackets this will return any random number so there is no limit we don't need any random number we just need a random number that less than our color hair Iceland in our array we only have 15 values so we only need a random value between 0 to 15 right if you get any number greater than 15 we will get an error because there is no value for that number in our airing so at this after the math dot random function star and 15 this is the length of our array comment these codes and block this variable random number you save this enough back to the browser and click this Add button now we can see this number inside our browser console click again now again we got this number if you notice we are having another problem because we are getting decimal values so we don't need decimal values to stop that put this math dot random inside math dot flow this map not flow only return integer values save this n back to the browser and click this Add button hole right now we are getting only random integer values between 0 to 16 let's make this little dynamic rather giving a hand-coded array length we can use array dot length property so remove this 15 and type this our array name is color so this dot color dot length say this n back to the browser and click this button again now also we can see this log getting numbers between 0 to 15 now uncomment this all and remove this lock and remove this color code and had this this dot color inside square brackets had the random number variable with this line we are pulling the data from color array on this random number position this number will be any number between 0 to 15 so if this random number is 1 this will pull the second hex code from the kalahari not this first one cause array index starts from 0 so keep this in your mind arrays start with 0 save this and it back to the browser and save a new category this time let's save something project Toulouse and click this Add button so now we got this success message go to the file store now we can see this newly created project to do category with these two values colors code and to do count now let's show a notification pop-up when we save data to the file scope for that we gonna be using another indian bank called in GX foster open the terminal and type this npn i ng x - toaster and press enter after this installed open angular dot JSON file and import the ngx Tosca CSS file under the CSS add this import node under scope modules slash n GX - toaster slash toaster dot CSS and restart the app you OpenType Model Ts file and first import browser animation model import inside curly brackets browser animation model from inside single quotes at angular slash platform - browser slash animations and import toaster model import toaster model from inside single quotes ng x - rooster now go to this import section and add these browser animations module we are importing this browser animation model cause mgx Crosstour required this animation model so next add this toaster module but for ode and brackets let's show a toaster success message instead of this success log when we save data successfully first import the toaster service inside this category service file import curly brackets toaster service then from inside single quotes mgx slash toaster after this inject this toaster service to the constructor private roaster : toaster service enough go to this callback function and remove this logged and had this this dot toaster so we are showing a success message so here dot success and fantasies inside the parentheses pass the message that you want to show as a strength so single quotes inside live category saved successfully save this file and live back to the browser and the saver live category this time saved something Skol and click this Add button beautiful we can see this toaster notification saying that new category saved successfully alright now let's do some form validations go to the category component HTML file inside this category input add this HTML attribute required with this required attribute we can show an error when we submitted this form with empty data okay let's make this validation using the angular first let's give our identity for this input hash category assigned inside of single or double quotes ng model this category can be any name so next if this as an error I want to make this input field border color too ready to do that let's write a small CSS write the CSS as global style cause we're gonna use this style on to the components as well open style dot CSS file inside this but border - danger border one pixel solid and haha we'll be ready save this and go to the category component HTML file and add this class border danger inside this input save this end back to the browser so we are having a small problem here we can see this top and bottom this red border but in a left side and right side we can't see the border to fix this get back to these tiles dot CSS file and add this import after this border save this end back to the browser we can see this border turned into red color so I want to show this border red when we have an error not always like this so we can add CSS files class with conditions using the angular ends each loss attribute directive so inside of this input tag square brackets and had ng + this C must be capital equal sign then double quotes inside this quartz curly brackets the first property will be the CSS style class name single course inside the single quotes so in our case border - danger colon then pass the condition first we have to check this form is submitted or not so off for identity is this F so f not submitted and add this end operator now check this input field has an error for that input field identity is category so category dot invalid after this remove this glass border danger save this end back to the browser now click this button without typing anything inside this input failure beautiful now we can see this red border when me passing an empty value if you noticed here we got also the data saved successful store message which means we saved empty data inside the for a store we can confirm this by going to the file store and check is there are any data saved with empty category valid here it is if you guys may think we did the validation and we got the red border on our input but still this saved an empty data how this happened actually we are not done with the validation we did only the changing this border column in order to stop data inserting to the database we have to stop submit this form when we click this button this call this on submit function if there is value no problem but if there is no value or empty value we have to stop this form submission in angular we can add the condition inside this ng submit we gonna check is this phone valid or not if this form is valid this own submit function will call otherwise it wants inside this before the on submit ad this F dot form not valid then hand operator double and signs then this on submit function save the Sun back to the browser click this Add button as previous we are seeing this red border but they didn't show any toaster notification call this form is not submitted which means this on submit function not worked that's why no data saved inside the fire stone if you guys may be wondering how do I add these valid submitted and this invalid properties actually these properties are coming with the hen G comb go to the category component is file and then comment this all inside this also have been function and lock this ng form F parameter save this and back to the browser type something and click this Add button inside the browser console we can see this list of properties inside this form we can see this valid property and it is true now cause we are passing a data so this form is not valid and is submitted property and in here we can see invalid property this is how I added these properties hope you guys got the idea right again back to the category component es file and uncomment this all and remove this lock now I want to show the error message under this input open the category component HTML file and add this after this submit button live with class text - danger and ml - 3 inside this leaf add this raw message category is required save this and back to the browser we can see this error message now so let's add a condition to show this error message when we passing an empty data now we are going to use the ng-if directive star ng if this I must be capital the equal sign inside codes had these conditions if not submitted and operator category got invalid and again and operator category dot errors not required so here we passed these three validations you guys already know about this to submitted and invalid so this also coming from this ng form in here we are checking this error required if this input field is empty this required will be true if not this will return false save this and back to the browser click this Add button without type anything inside this input field beautiful we can see this error message if you typed something inside this input we can't see the error delete this type data once it this input field got empty this will show again the error message so we are done with the formalization part next let's load saved category list from the file store and show it in the front end open category service file and like this safe category create a function to load categories Lord categories this C capital then parentheses and the function scope for loading data from the first row we don't need to pass any parameters inside this function this got a FS if you can remember this AF is is this injected angularfire scope dot collection brackets inside brackets pass the collection name so single quotes inside this course collection name categories after this dot snapshot changes this C must be capital and brackets after this blood type and again brackets inside these brackets map this so type this map again brackets inside these brackets actions then arrow function curly brackets inside this arrow function return actions dot map brackets inside this a again another arrow function inside this arrow function create a variable constant data assign a dot payload dot doc do C dot data and parentheses then semicolon next another variable Const ID assign a dot payload dot doc dot ID then return this ID and data so we want to return this from this main function also so ad return to this main Kulii this return coming to this function and this return coming to this function and this return coming to this function if you notice here we are getting an error here to solve this ad this import import curly brackets he said curly brackets map from inside single quotes R X J's / operators alright next let's call this load categories function from category component es file we want to show saved categories data when this component unloads if you used jQuery you can remember that unload function in angular we can do the same with this energy on init function if you want to take an action when the time of component loads to the browser we can use this ng on init function let's call the load category service function inside this ng on aid function this load category service then we can see this auto import now we can see these two functions choose this load categories function this float categories function returns an observable so subscribe to this function dot subscribe brackets inside these packets Val this can be any variable arrow function and disco inside this just lock this well save this end back to the browser inside browser console we can see this list of all to do categories if we look further we can see each object as highly value and the data object inside this data object we can see this category color code and total count all right now we have this data so next let's load this data inside this category component HTML V we cannot access this well variable outside of this function scope because this variable isn't a global variable so create a global variable inside this class scope crate of variable categories and give the type array if you noticed this output is an array here we can see the length of this arrow then this array type is object because we got here a list of object inside this arrow then assign this well to this categories global variable this blood categories assign well save this and back to the categories components training file now we have to loop these categories to do that in angular we have a directive in g4 in the previous section we designed this category card so now loop this category card so I want to loop this category card but this category card is inside this column so I want to loop this with this column so at the ng4 directive inside this column leaf star in G OH equal sign inside quotes type the loop let category of categories so this categories is this global variable and this variable can be any name change this category name remove this and open and close to curly brackets in angular if you want to show a dynamic data on the front end we can use this double curly brackets inside these curly brackets category dot theta dot category don't get confused this category is this loop variable and this data is coming from this array object inside that data we can see this category this is the value we are pulling with this and make this to do count also dynamic open and close to curly brackets inside this category dot data drug to do count save this and back to the browser beautiful now we can see this list of total category cars some of these cards are not shown in the category and also this to do count why is that because at the beginning we saved a data without to do count and color code and even this category key also wrong after that we saved an empty category data when we doing the form validation that's why we are getting these cards with missing data so remove this invalid data from file store and back to the browser now looks perfect so now let's add side borders for these category cards by using the color code Valley in angular we can bind dynamic style to HTML tag using this style directive so we are adding the left border color to this category can't go to the category component HTML file and add this inside the card leaf square brackets inside this style dot border - left - color this is this style bio active and this is the CSS property then equal sign codes inside codes at the color code category dot data got color code this value coming from the Firestone not only that let's add the color code to this category h3 this time I am changing the text color so again inside this h3 tag square brackets style dot hala equal sign inside courts category dot theta dot color code save this n back to the browser beautiful looks perfect you can see this dynamic left border and the category text colors let's add a new category and reminders and click this Add button data saved successfully we can say this toaster and also we can see this newly created category remind the card and also we can see this random color border on this card perfect everything working according to how plan all right now next let's edit the categories first let's create a update category function inside category service the function name is update category then parentheses after this function scope inside this function let's add the update hurry this got a FS dot this time not collection we are updating a document so doc then brackets inside brackets at the document part as a string document pot format something like this collection name and slash then ID of the document that you want to edit so now the collection is categories how do we know this cause we are editing to do categories so collection name is categories pass this as a string add single quotes inside the single quotes categories slash then we have to pass the document ID this document ID will be dynamic so we are getting the document ID as a parameter for this function inside the parentheses add a variable for the parameter ID the type will be string so the document ID is this ID parameter so conclude the string after this course plus sign and ID so we are getting the document with this after this dot update brackets inside these brackets we have to pass the editing failed name and the editing valley so add curly brackets inside this the field name is category and : now we have to pass the edited category value for this so we are getting this edited value from the category component so add another parameter for this after this ID parameter comma updated data now pass this updated data to this value now the whole back function dot then brackets inside this callback function add the parentheses then arrow and the function scope inside this for now let's add a success log later we can add the first message next let's call this update category function from category component before that let me quickly explain the editing process if you can remember we added this pencil icon in the previous section now what I want to do is when we click this pencil icon this category must flow to this input field and I want to change this button add text to edit after editing this category and if we have to click this submit button this will submit the form on this submit form I want to call this update category service function let's do this step by step first let's load the category to this input field when we click one of this Edit pencil icon to do that I am gonna call a function when clicking this icon this time we want to take an action on mouse click write so in angular we can bind click event for this so inside this I tag this is the edit icon type so brackets inside this click equal sign and codes inside this codes call the function so function name is on edit then parentheses still we don't have this on edit function so create this on edit function open the category component ES file after his own servlet function create this on edit function on edit parentheses and function scope now I want to bind the category to the input field to do that I am going to use two-way data binding method in angular open category component HTML file so first I am gonna pass the category to on edit function inside this parentheses the category is this so this is coming from the file Stowe so copy this and paste it inside the fantasies now go to the category component TS file and add the parameter to this on added function parameter variable name is category type will be string let's check this is working or not lock this category parameter save this all files and back to the browser open the console and click this edit pencil icon we can see this category name log inside the console click this category call this time this logged this category beautiful now let's bind this category to the input failed create a global variable category name and this n will be capital type will be a string and make this variable empty okay now assign this category parameter to this category name global variable this dot category name assign parameter variable category after this go to the category component HTML file inside this in previous we added this NG model to bind this form later to this form now let's bind this input field to this category name we are doing two-way data-binding so wrap this ng model inside square brackets and again Brackins and they put this ng model inside this equal sign and inside single quotes variable category name save this and back to the browser now click one of this Edit pencil icon beautiful now we can see this category inside the input field some of you may be wondering how this happens with this own edit function we are passing the category inside ordinary function we are getting that category parameter and assigning it to this category name global variable then we have bound this category name variable to this input field so this variable value is shown inside the input page for example if I click this dim categories edit button from this icon we are passing this team to this function on edit this parameter variable is now Jim now we are assigning this Jim category value to this category name so this also now Jim and we bound this category name to this input so this category name value is Jim so this Jim category value is showing inside this input field this is how we got this category inside the input fail hope you guys got the idea we don't need to ng models here so remove this so next I want to make this button add to edit to do that I'm gonna make the submit buttons add dynamic remove this handle have two curly brackets and and a variable named data status this s is capital we don't have any variable called data status so create a new variable inside the category component is fine this is gonna be a global variable so inside the class scope where the variable the variable name is data status and F type will be this frame save this and back to the browser now we cannot see anything inside the button cuz we removed add text and added this variable but still this variable doesn't have any assigned value so assign a default value for this variable this value will be added now I'd again save the Senate back to the browser now we can say this and inside this button now I want to make this add to edit when they click this edit icon so we already have the click event function go to the owner ed function inside the category component is file and inside this honoré function change this beta status variable add value to edit this dot data status assigned edit save this and back to the browser click one of these Edit pencil icon now we can see this add change to edit and also we can see this category inside this input field alright we load category to this input field and also we change this add to edit when clicking this edit pencil icon so next what do we have the blue is called the update category service function form category component is five the update process will be something like this we already loaded the editing category with this input field so now we can edit the category itself this input field after editing this we're gonna click this edit submit button so when we click this button this also does the same form submission like add category this will call this same concept with function click edit one of this category and let's change this I'm gonna add edit after the category and click this edit button okay we got this save data success message and we can see here Nick category saved instead of updating the category why this happened because we are calling the same form submit function in edit action and save action so what I am gonna do is insert the own submit function I am gonna capture these two actions add and edit so if this button is added we are saving a new category if this button is added we are gonna do the editing category so this button status changed with this data status variable so inside diskin submit create an if statement if backups the condition is this dot data status equals add don't forget to put this inside the course and the scope after this else if brackets this time we are checking this but they status equals edit and the scope with this ADIZ we are saving a name category so put this safe code inside this ad is for now let's log edit inside this additive save this handle back to the browser edit one of these category and click this edit button right now we are getting this edit log inside the console and we didn't get any pro sternness aged or new category saved so we are almost done now remove this log and let's call the update category function from here so this broad category service but now we can see this photo complete select the update category function to call this function we have to pass these two parameters first one is the document ID so we need the document Heidi so go to the category component HTML file first the document parameter as this document ID to this honor it function after this comma category got ID so this is coming from the firestore if you can remember we got this ID inside this categories array now we have to capture this ID parameter in unmarried function go to the categories component es file and add this parameter ID : type is string so now we want to access this ID from this on submit function this is not a global variable so we cannot access this ID parameter from another function so to solve this problem let's make a global variable and assign this ID parameter to that global variable inside the class Co the variable name is cat ID and type is string now go to the honorary function and assign this ID parameter to that cat ID a global variable this broad cat ID assign ID now go to be on submit function and lick pass this cat ID as the first parameter for the second of parameter we have to pass the edited category so f third value got category name so this is coming from the ng form or it saved this all and back to the browser click the Edit icon on this category card I did this so I'm gonna add edit end of this and click this edit button beautiful now we can see this log which means category data updated successfully and also we can see here updated category let's add the pros to success message instead of this lock open category service ta spoil and inside this update category remove this blog and the copy mr. stern message from the safe category function and they taste it inside this update category and they change this safe to update save the son back to the browser again update the same and alert category and this time I will remove this edit and click this edit button perfect now we can see this toaster success message if you noticed after we editing the category it still remains inside this text field so let's make it empty after it in this category and also I want to set this button back to and inside onsubmit function after this update category function call add these F dot reset form and brackets this F is this angry form so this will reset deform and also change this dot data status to add and also add this firm reset to this safe category also say listen back to the browser edit that category click this edit button perfect now text field is empty and discredit change back to the ad-lib alright we are now successfully completed the update category next let's do the delete category delete category is really easy comparing to update under safe as usual first let's create the delete category function inside the category surface is fine function name delete category this C is capital parentheses and the function scope inside this function let's add the delete query this got AFS dot this time also we are deleting on document so doc backups inside these brackets we have to pass the document one codes inside these codes collection name we are deleting categories so collection name is category slash then we have to pass the collection ID so we are getting this idea as a parameter so add a parameter to this function this will be ID and type will be string now can get this ID here plus sign and ID end of these brackets dot delete brackets now the callback function dot then brackets inside these brackets arrow function operand close a braggart then arrow and this scope inside this callback let's show the delete success message copy and paste this toaster message this time let's change the message type of danger and add this message inside these brackets remove is all and add category deleted successfully next go to the category component HTML file inside this Delete icon tag at the click event binding brackets inside brackets click assign let's call a function codes inside on delete and brackets now let's create this own delete function in a category component PS file after this on edit function create the on delete function let's call the delete category function from this function this broad category service dot now select the delete category function this required the document ID parameter so let's pass the document ID to this on delete function back to the category component HTML file and pass the ID inside this parentheses category dot ID now again go to the category component es file and create a variable to catch the document ID inside this unwearied parentheses ID and type will be a string now pass this ID to this delete category save this all hand back to the browser now click one of this category did it icon we can see this toaster red color message saying that category deleted successfully and also that category Cod removed from our category list so we can't see that category card any longer delete another one beautiful so we are successfully completed all the save delete update and load categories functionalities next let's move on to the to those component so this time this is going to be very easy this to do also the same as the category we have to save update delete and load students from the fire stove and also we do marking to do is completed oh and completed in this produced component alright let's create a service file for this to do component so inside the internal terminal run this command we already did this when we generating the category service file this also did same ng G H this service file will be generated inside the service folder so service slash and this service name to do press enter after this service file generated let's create this safe to do function before that we have to inject the angular files to you this constructor this time I am NOT going to hand code these imports I am gonna copy and paste from category service go to the category service file and copy these all imports and paste it inside the to do service fine we are going to use all these same as category service again go to the category service and a copy based injected a fizz and toaster paste it inside this to do service constructor so next let's create the safe to do function safe to do synthesis and the scope inside this let's do the add foolery this bloat AF is not collection and brackets inside this we have to pass the collection name this time this is different than the previous category collection previous categories collection was in the main hope so here we can see this at first but the to do collection is inside this categories collection and also we can see this to do collection inside this the claimant true so we have to build this quarry so the first collection is categories inside this collection we have the document so dot doc and brackets and inside these brackets passed the document ID this document ID will be dynamic so we are getting this ID as a parameter inside the function parentheses ID the ID variable and the type will be string and cause this ID parameter inside this doc brackets after the document only we have this reduced collection we have this traduced collection inside this book so after this dot collection this time collection name is produce don't get confused this categories collection is this and in this document can be one of this document inside document we are saving on need to do inside this to those collection hope you guys know the idea right after this everything same as previous so copy this code from this blood add and replaced it after this produce collection so we need this data parameter so create a parameter called data inside this function scope change this poster notification text ad to do instead of this chatter Guri so toaster message is new to do saved successfully save this now let's call this function from to do component T is file before that I want to open the to do component when we click one of these category cards we can do this by adding a router link to this card content this router link equal sign inside codes give thee to do router if you can remember he created this router for to the component so the router will be slash to do save this and go to the browser now click one of these card awesome we got the to do router and little component leave so next let's make this total component form to angular template driven form so this also like the previous category component form so copy home identity and the submit event binding placed it inside the total component HTML files form next copy these ngmodel required input identity and this ng class directly from category input and paste it inside this to do input now change these this identity will be to do and also this category dot invalid will be to do but emulator now copy this error message from category component HTML file and paste it inside to do component stained main file after this submit button change this category to save this and open to the component his file first let's import big to do service file to this component fine he put curly brackets to do service from single quotes double dot slash service / to do dot service now inject this to do service to this constructor private to do service : to do cells and also I forget to mention remove this to a data binding energy model and put just ng model here we'll do the two-way data-binding in later section alright now create the unsubmitted function on submit fantasies inside parentheses we are getting in G home parameter so if type will be in G form and select this photo suggestion this will add the photo import to this in G phone function scope inside this function let's create the 2d object let to do equal sign and curly brackets as well to do document plan into the document we have to do so to do : this to do coming with the phone so f dot value dot to do text this is the text field name next we have this is completed so after this is completed : past the default value false now let's call this a produ function this rod to do service but safe to do and parenthesis be safe to do function required these two parameters ID parameter and the data parameter we have this data parameter on ready but we don't have the category document ID to cause for this ID parameter this category document ID is in the category component so we have to pass that ID to this to do component so we can do this by binding this ID to the router to do that we have to first change our router open the app - routing dot model the PS file and modify this to do router and the slash after this and we are binding a data to this router so : and any variable name so we are passing a document ID so I am naming this variable ID save this file and get back to the category component is filed in here we are calling the to do router so now we have to pass the document ID with this problem to do that first wrap this router linked with square brackets and put this router also inside the square brackets and had trouble codes for this cure records for the first value we are passing the wrong term as a second value we are going to pass the category document ID category dot ID save this end back to the browser click one of this category card so this loads the Trudel component as previous but if you notice carefully we can see the URL has changed end of the to do router we can see this document ID go back and click another category card so this time this loads the different ID so we are passing the relevant ID for the clip category with this URL all right now we have the category document ID on the table component sprouter so now we have to get that ID inside the to do component ts5 to pass this safe to do service function so we can get the router binding data with activated router so let's import the activated of router input inside the curly brackets activated route from inside single quotes at angular slash router now inject activated router to this constructor private activated route : activated wrong follow this capital simple letters carefully next let's capture this powder bound ID on this trouble component loads and assign that to a global variable so create the global variable get ID and the type will be string go to the energy on init function if you can remember I told about this function on the previous section this function loads immediately on load this component to the browser so inside this engine in its function this dot cat ID assign this got activated route but snapshot dot param map dot get and packets inside these brackets pass the router variable for this category ID so we passed a variable name as ID inside the router module file so add that variable inside these brackets single quotes and ID so after this let's make sure this is working so at the lock for this cat ID save this and back to the browser open this browser console inside the console we can see this printed ID Kelly he can see this URL valley not painted inside the console go back to the main category component and click another condom this time also we can see this router bound ID value inside the also console perfect so now we know this is working so remove this och go to the submit function and pass this global variable fourth category document ID this blood cat ID and also pass this to do as the second parameter after this add deform reset so f not form reset and brackets save this end back to the browser let's save a name to do something new to do task 1 and click this + button we saw this toaster success modification which means we have saved a new category two files to successfully let's reconfirm this go to the files toe panel and let's find the file store document belongs to this ID here it is open this we can see the reduced collection inside this document open the total collection inside this trudeau collection we can see this name is created produce document perfect we added the form validation also let's try to save an empty today we can see this error when we trying to save new to do alright now this category document has one to do but still this to do count value is zero so let's add an increment to the to do count when saving a make people go to the to do service file and add this increment code inside this safe to do kornek before this toaster message let's add the increment quarry as usual this wrote AFS drop we are updating a category document so doc brackets inside this add the path for this document first collection name beside quotes categories and slash and can get the document ID we are getting the document ID as a parameter for this function so plus sign and this parameter variable ID after this we are updating the document so update and brackets inside these brackets past the field name that we want to update and the updated value first add curly brackets inside these curly brackets the field name is Prabhu count as a value pass this this time this is a bit different fire stove select the autosuggestion cause we need to tow import this file stone if you don't get the auto solution just simply type this import dot field value dot follows this capital simple letters came fully increment brackets inside brackets add the increment value so we want to increase this to do count by one so add number one inside these brackets save this and back to the browser this time save a new to do under a different category select this category inside this to do create a name to do name to do task one and click this Add button we got this success toaster message go back to the category page beautiful now we can see this incremented value previously it was zero now it is one perfect all right we are done with the new to do save and the to do count increment so now let's load the saved to those inside this to do leave this also same like load categories there is no much difference so copy this load categories function from category service file and paste it inside the to do service fine change this load categories to load to deuce and change this quarry this time we are not loading data from categories collection but from this to this collection we already know this to deuce collection located inside the categories document so we have to pass the correct path we did the same thing for this address Quarry also so add this after the collection brackets dot doc and brackets inside these brackets we have to pass the document ID so this will come from the 2-dose component so get this as a parameter and this parameter inside this road to those parentheses ID and type will be string pass this ID inside these brackets next again not collection this time collection name is to dos and no need to change these all save this and go to the tudo component is file now let's call the load to dysfunction from this ng on aid function so this dot to do service dot select the load to dysfunction this function are required the category document ID so pass this cat ID this not kept ID so this function returns an observable so subscribe to this observable dot subscribe brackets inside brackets a variable name this can be any variable so I am declaring this variable s when we al after this arrow function and the scope in order to access this observable data we have to assign this value to a global variable so create a global variable named introduced and if type will be array and array type will be object so now assign dispell to this to do global variable this dot to dos assignee when let's check this is working on not block this to do s-- variable after this save this and back to the browser inside the browser console we can see this list of produce and all right now go to the traduced component HTML file and lo the 2-dose array we already designed this turbo card let's show the 2-dose inside this card inside this card div and the ngfo directive star and g4 equal sign inside single quotes let to do this variable can be any variable name and of produce this is the global produce variable remove this handle type text and open and close to curly brackets inside this curly brackets to do dot theta dot to do this to do is this to do variable and this data is coming from the final stock here you can see data inside that data we have saved our to-do values with this to do key this Trudeau is this alright save this and back to the browser beautiful now we can see the list of produce in here now let's edit this reduce this also same as edit category when clicking this edit icon this will load the to do inside this text field and this Add button will change to edit alright first let's create the update to do function inside the to dos service file after this create the update to do function inside this function let's create the update query as usual this dot AF is drug collection brackets inside brackets courts and the collection name you already know this we are editing or to do but the to do collection is inside of a category collection and also inside of a category docking one so this first collection is categories next dot doc and brackets inside these brackets we have to pass the category document ID so this document ID will be dynamic so get this s of parameter inside the parentheses create a variable cap ID and if type is string pass this cat ID parameter inside these brackets and again under collection this time this is produced collection add pair of brackets and pass the collection name produce as a string next again dot doc we are updating a to-do document inside the produce collection so now we have to pass the Trudeau collection ID this also dynamic so create a parameter for this to do ID there I made a variable name is to do ID and this I must be capital and type is string first is to do ID parameter value inside this brackets so we are updating a document so this will be brought update and brackets inside this Blacker's passed the editing failed name and and the edited value as an object inside these buckets curly brackets the editing field name is Trudy : and this edited value will be dynamic add another parameter for this edited of value so variable name is updated data type is string and the past this as this edited to do Valley next dot then brackets inside brackets create the callback function inside this callback function had this toaster success message this lot toaster dot success and brackets inside these brackets add this message to do updated successfully save this file now let's call the update to the function from the trouble component please file before that let's load the to do put the input field and change the Add button to edit this is also the same as the previous category first let's load the to do inside the input field for this we used to a data binding inside this the daikon tag called the ordinary function when this Edit pencil icon click so this is same as previous category edit so copy click event inside this edit icon tag from category compound HTML file and paste it inside this trouble component HTML files edit icon egg so we are passing two parameters for this first one is these to do so remove this category and had to do this to do is this loop variable and this is the first row to do document phase name for the trouble now create the own arid function inside this trouble component T is file this also the same mask category on a read function so copy this own elite function from category component file and paste it inside the to do component T is file we are getting to do instead of a category from total component HTML file so change this category parameter to true do keep this ID now change this category name to to do valley we are getting this error cause still we don't have this total value global variable so create that inside the class scope trudeau value and type is string next this data status variable we need this also if you can remember in a category component we made add button to edit using this data status global variable we are doing the same add to edit here also so we need this data status variable create the data status variable and type is string and si in the default value hab did next change for this cat ID to to do ID and afraid that global variable also to do ID type string in this onedit function we are assigning the to do to this to do value global variable now bind this variable to thee to do input field go to the to do component HTML file put this ngmodel inside the square brackets and brackets equal sign inside codes add the to do value global variable next add the data status variable to this submit button remove this add open and close to curly brackets inside brackets pass the data status variable save this all and back to the browser click this to do edit icon perfect this loads the to do inside the text field and also we can see this button add change to edit alright let's call the update to do service function from this unsurveyed function so first we have to capture the action this is add to do or editing to do so put an if else condition if at the condition this dot data status equals add if this is true we do this saving new to do so put these codes inside the safe next else if the condition will be this dot data status equals edit if this true will do the editing to do so call the update to do service function from here this dot to do service dot update to do this requires three parameters first one is category looking on ID we already have net we got that from the router this dot cat ID for the second parameter how to pass the produ document ID this is coming from this on edit function so pass this got to do ID the next parameter is edited to do value so this is coming from the energy form so if dot value dot to do text after this reset the form and change edit button to and save this and back to the browser edit this add edit end of it and click this edit button perfect we got this updated success message and we can say this edited Trudel and also this form recept and this edit change to add so next move on to the delete table section as usual create the deleted Prada function inside D to do service file go to the to do service file and create the delete trouble function inside this function let's do the delete Cory copy this update query and paste it inside this old same remove this update to delete and remove this object inside the brackets we have to get these parameters that ID and to do ID we are deleting a to-do document that to do document is inside the categories collection and category document as well as the to dos collection change this toaster message type 2 error and change this message through to do deleted successfully now let's call this delete function from the total component TS file go to the to do component es file and called undelete function from this delete icon this also same like category delete so go to the category component HTML file and copy this click on delete function and paste it inside to the component T is fine inside this Delete icon tag change this category to to do now go to the category component is file and copy this on delete function and paste it inside the Trudel component T is fine keep this parameter we are calling true to do service file so change this category service to produce service and the function name is delete to do and this function required two parameters first one is category document ID so pass this dot cat ID and next required the to do document ID for that pass this parameter ID save this and back to the browser delete this to do perfect this to deleted successfully from the fire stop now we have to decrement the to do count when we deleting a to do from category document so if you can remember we did true to count increment when we saving a new trouble this time we're gonna do the decrement when deleting this safe to do this also the same as increment so copy this increment code from the safe to the function and paste it inside this delete true score is callback function change this ID to kept ID change this number one to minus one if you want to increment add plus numbers if you want to decrement and - numbers inside these brackets save this and back to the browser delete this to do now this category doesn't has any to use go back to the category list here we can see this change to zero let's check this again with another category save - new - those back to the category list here we can see the total count updates zero to number two now again go to the to-do list and give it one from these two those again go back to the category list of it now this updates to one which means this category is one to do we are completed save update delete and offload functions for to do component next let's do the to do completed and uncompleted task we can see this green circle with this right icon and also we can see this red circle with this cross icon I'm gonna use this green icon to make uncompleted to do to complete and when I use this red icon to make completed to do to uncompleted many saving a name to do by default this to do isn't completed because we are saving is completed value as false when we saving in to do if this is completed value is false this means that to do isn't completed yet if this is completed value is true which means that Trudeau is completed so now let's do the mocking produce as completed when clicking this green icon so what do we going to do is when clicking this icon we gonna update the East completed field to true we already know if East completed value is true that to do is completed not only that I want to show a horizontal line forcing me to do text on the completed to this so we can differentiate completed to do an uncompleted reduce so first let's design this original line go to the to do component HTML file and add an HR tag after this to do text now add some CSS to this HR tag openly to do component CSS file and add these CSS styles HR open close curly brackets inside this display:block margin - 8 pixels margin - left 30 pixels margin - right photo border - style inset border - with 1 pixel background - color black save this and back to the browser so now we can say this HR line crossing this to do text create another name to do need to do tasks to and click this Add button we got this a new trouble if you noticed we are getting this picture line on all to dos but I want to show this HR line only on the completed 2d so let's add the condition to this HR line by using the angular ng-if directive go to the to do component HTML file and add this inside the HR egg star ng-if equal sign inside single quotes to do dot theta dot is completed with this line we are checking the east completed value is true or false if this is true this HR tag will appear on the leaf if this is false is HR tag will not be shown on the leaf save this on back to the browser now we don't see that HR line on to those cause these two deucey not completed yet so now let's add the update query to make this Prabhu completed as usual go to the to service file and create earning function called mark complete inside this function what you are doing here is we gonna update the relevant to do documents is completed failed value to true so this is going to be an update query so copy this query from update to do function and paste it inside this mock complete function discovery path will is same don't need to change anything this required the category document ID and leave to do document ID so creates these parameters inside the parentheses that ID type will be string and next to do ID and type will be a string now change this updating field and the value this time we are updating the east completed field and value is true change this toaster success message type to info and also change this message to do marked completed save this now let's call this function when clicking the completed icon so go to the Trudeau component HTML file and inside this FA - check - circle icon tagged at the click event inside brackets click equal sign inside codes let's go to a function called complete Prabhu and passed it to do document ID as a parameter to do dot ID now go to the to do component PS file and create this complete to do function this function getting a parameter to do ID type is a string from this function called the mock complete service function this dot to do service dot mark complete and the parentheses this function requires two parameters so pass them this dot cat ID and to do ID save listen back to the browser click this complete icon perfect we can see this poster message saying that Trudeau marked as completed and also we can see these horizontal line on this completed to do beautiful now let's do the marking completed to do as uncompleted is also the same as previous mock complete function so copy this function and paste it under this function change the function name to mark and complete keep the parameters the cuy is the same this time we are making the to do as uncompleted so change this is completed value to false also change the toaster message type to warning and change the message to to do marked uncompleted save this and go to the to do component HTML file this time at the a given for this fa x - circle icon tank copy this click event and paste it change the function name to uncomplete to do keep this parameter we need that has radius now go to the to do component TS file and create this uncompleted to do function this is getting the to do ID parameter the type is string call the mark and complete service function from here this dot to do service but mark uncomplete pass the category doc ID and to do ideas parameter save this all and back to the browser click this red uncomplete icon beautiful this time this mark dis completed to do two uncompleted to do and we can see the horizontal line disappeared when it's mob 2 and complete we are almost done with the second section of this tutorial so now I want to I'd this to do complete icon when to do marked as completed and I want to I did this uncompleted icon Wendy to do mark as uncompleted and also I wanna do the same for these left side I comes true when the to do is incomplete I wanna show this red circle icon and hide this green right icon and also when the to do is completed I'm gonna hide this red icon and show this green icon we can do this by using the ng-if directive go to the to do component HTML file inside this icon tag let's add the ng-if star and give equal sign and the condition this icon is that horrid circle icon so I want to show this when the to do is uncompleted which means if the east completed fail is false I want to show this icon so the condition will be something like this to do dot theta dot is completed with this I am getting the East completed field value of this to do from first row and also with this condition this will show this tag when this value is true but for this red circle icon I want to show this when this is false to do that and this exclamation mark front of this now do the same for other three icons copy this ng and paste it inside these three icon tanks this is this green icon so I want to show this when this value is true so remove this exclamation mark so now we have this completely to do icon I want to show this when or to do is not completed so this is gonna be false keep this with this exclamation mark this is the uncomplete icon I want to show this winner to do is completed so this is gonna be true so remove this exclamation mark save this and back to the browser in here now we can see only this one icon these two deuce are still not completed that's why we are seeing these red circle icon and this green to do complete icon make this to do complete perfect now we can see this icon change to green right icon and this complete icon change to this red uncomplete icon congratulations guys we are successfully completed building this to-do app next let's move on to our last section let's deploy this to-do app to firebase host and make this app go life before that if you guys until now enjoyed this video or learned something give a thumbs up if you haven't subscribed to this channel please subscribe it's really appreciated guys and also do not forget to eat the bell icon alright let's build this to do and give an active production first let's put this firebase config inside the environment product Proteus file otherwise this will show an error when we building this app to production saying that cannot find the firebase config variable inside environment got dot T is file copy this from environment low TS file and paste it inside environment about hot dog PS file now type this command on the internal terminal ng build - - product PR Co D and hit enter this will build our angular 2 production and it may take several seconds to several minutes I get back when it's done our angular and build successfully in production model and ready to go lies we can find this build files inside this dist folder now let's enable a fibers or stain go to the fibers console and go to this posting tab now we can see this setup guide this is very simple just follow these steps first thing first we have to install this v is CLI on our PC oh man copy this command and open the terminal or the command prompt paste copied command if you are on a Mac add sudo beginning of this command press enter this will install 5a CLI globally in our computer [Music] once it done let's do the second step before that navigate to the project folder you and navigate inside this dist folder cause our production already app files are inside this dist folder and also rename this kolduny into public run this command now first we have to locate 85s account fire base login this will open a Google account to login inside your default browser log into your Google account keep this in your mind in this action you have to log into your same Google account when you use to create the firebase after login 25 a second let's run this second command firebase in it yes we are ready to proceed so Q yes to this first this will ask which feature that you want to use we are trying to host our to-do app so select from this costing navigator using the arrow keys to select the feature use the spacebar now hit enter now select this use an existing project option because we already created the firebase project press Enter next select our firebase project to do our next question this is asking about the main direction by default its use public folder as main directory if you can remember we renamed this main production build app folder name to public so no need to type anything just it end up this will by default to use this public folder has main direction next this will ask to rewrite our index file we don't need to do that so give these two no and hit enter next this will ask to override index file we don't have to do that also so give this also no and hit enter perfect this is the end of the firebase in it let's move on to the final step we are successfully completed these two commands now click this next button this command will deploy our to-do app to firebase host once it complete we can check our app using this domain all right let's run this command inside the terminal copy this command and paste it firebase deploy press Enter beautiful now our app is deploying to the firebase host this will take a bit time so stay until this complete perfect our to-do app is now life we can see this success deploying message and we can see this URL to access our to-do app copy this URL and paste it inside the browser congratulation guys we are successfully ousted our to do after the five ways hast now go to the vibe is console and complete this continue to console in case if you don't like this version of why this URL you can use this web app URL this also open our app and also you can connect your own domain instead of these subdomains if you guys want to know more about this leave a comment below this firebase host is free but there is some limitation go through the firebase pricing page then you can get an idea about these limitations this is it guys this is the end of this tutorial hope you guys learned something with this tutorial and also I think I gave a full package tutorial from design to deploy I always wanted to do something like this you guys can improve this app by adding additional features and also if you guys want you can link this to do a player or volume as you guys enjoyed the tutorial and if you guys want more tutorials like this please give a thumbs up leave a comment if you have any questions and also please subscribe to the channel I am planning to release a new tutorial every week so don't forget with the bail I come stay tuned thank you guys we'll meet again with another video until then learn spot not hard

Channel: OctAcademy

Views: 5,067

Keywords: angular 9 tutorial for beginners step by step, angular 9 tutorial, angular 9, angular app from scratch, angular application, learn angular 9, learn angular, angular project example, angular for beginners, angular firestore, angular firestore project, modern app, angular firestore todo app, firebase tutorial, angular 9 tutorial for beginners, angular 9 crash course, angular tutorial 2020, octacademy, learn angular from scratch, angular full project example

Id: wINy6QWz3nA

Length: 215min 21sec (12921 seconds)

Published: Thu May 14 2020