Angular Material Course 2022 | #angular

welcome to this angular material course before moving forward let's see what we are going to design in this course so you can see this dog no you can see this design which is having a card with a title summary and an image if i click here you can see another card with all the description we are using some kind of tag system to define the tags for a particular blog and this is a very nice navbar we are having over that we are having this button which take you to the block section then we have this log login button which will take you to this login page where we have very nice little form with email and the password thing and a login button and when i click here you can see we have this nice little loading and then it redirected me to the home page not only that we also have this notification bell icon with a badge like how many number of notification you currently have and if i click here we got a drop down which will give me the notifications along with this we are also having one hidden url and this is for the table and not just table we have some more information here so you can see we are having this image the headers for this table and we are designing this table we are customizing the column we are making changes in the table we are going to add these custom column for action for edit and delete and yes this delete is really working so if i click here we have a nice little dialog box which which is asking for the confirmation and if i say cancel nothing is happening but if i say delete you will find that the block number two is now not available it is really deleted so all of these things we are going to create in this angular material and obviously we will use the angular over that and installing everything and now let's see what exactly step by step we are going to learn on this angular material so first yes we will start with what is angular material and then installing angular material in a fresh new angular application then we will get started with a button component then we will move to the material module and after that we will see how we can start using a new component called toolbar and understanding more about that then we will get back to the buttons and explore more for this button component then we will create the login page route so this is not that angular material it's core angular thing but after that we will also use the divider and spinner but remember on this login page route we will create the form login form so yes we do have the angular material thing on the login page route after this we will move to the grid list and how we can show different different blog cards and then for the tags we will use the chip component and now we will move to the notification thing which we have seen and for that we need the icon and the badges finally we need the drop down menu when we click on that bell icon for the notifications and after that we will going to understand how we can use the really amazing component and most useful component which is data table in that data table we want to customize various columns and the data and how we can add a custom column which we have seen on the demo then we will also use the dialog box which is again a tricky component to use but again a very nice component and finally once we are done with all of these things we are going to deploy this uh design or whatever we have done to the netly file so you can see this is the link you can actually try before actually watching this video course okay so let's get started with the angular material let's start with angular material so what is angular material angular material is a material design component for angular so what is material design so google has released this design principles for the front end for how your website can be designed and with all these design principles this angular material design component is created so this is exactly similar to the material ui we have for react and with beautify we have for vue.js so both or all of these three are exactly same but for different different front-end frameworks so angular material is very high quality internationalized and accessible component for everyone yes it is for everyone you can customize them as you want straightforward api with consistent cross-platform behavior what is cross-platform behavior means you can use this angular material to design not only just for the desktop but for your tablet and the mobile application it's so versatile so coming about the versatility provide tools that help developer build their own custom component that means it's not a stick with one way of doing things if you don't like something on the angular material component you can change them customized with the bonus of material design specification and obviously it's a frictionless that means built by the angular team to integrate seamlessly with the angular so if you are an angular person you must have the knowledge of angular material so let's start this course but before that if you are not following me on twitter just go and follow me at sarthaksevi you can get a lot of other things about me from there and if you have not subscribed to bitfume's youtube channel this red subscribe button is only for you you have to click on this and don't forget to hit the bell icon to get notified about the shorts or the amazing courses i share so you can see a lot of amazing courses and if you don't have much knowledge of angular this really amazing course is only for you okay we can get started with angular material by first having a new angular application or new angular project and for that we need to go to angular dot io absolutely important to go to this website because sometime things get changed so you always need to follow the documentation here you can click on get started basically you need to look for this setup and on this tab you will find this thing npm install globally angular cli now i already have the angular cli so if i open my terminal and then if i can just zoom i say ng and i can get the help and if i get help and if i'm not getting like ng command not found something like that that means i am having the angular cli but if you don't have then you can run this command after that you need to create the new project using ng new and your project name let's create a new project name on the directory we have so i just removed this which i was used for the trying now let's start with a fresh new application i just need to say ng new and i say matt course that means material design codes for angular mat course is here or maybe i can say angular math course that's good now hit enter and it's asking do you really want to have the routing for me yes i really want to have the routing in our application because we will need that now it says what kind of styling you need so css is obviously the always basic choice and that's it once you have done everything it's now creating the project installing the packages the dependencies and very soon we will have the angular project not the angular material because angular material we need to install on the angular project so first we will have to have the angular project and very soon we can see our project is now created so let's just go cd into angular material course and i open this project with vs code obviously and let's maximize it zoom and that's it so we have this project and you know to get started with the angular project we just need to run ng start or ng serve or npm start so we can say npm run start you can do this or since we already have the ng installed globally we can directly run ng serve like this one so both way is fine whatever is good for you so now localhost 4 2 0 is available for angular project now since we have the angular project now it's the time to install angular material in our project for that let's go to this website which is called material dot angular dot io absolutely important to go on this website only then click on get started and then you will see here we have install angular material it says that you need to run this command and you can copy that command go to our application create a new terminal and here just run this command so what's going to happen here now it's asking very simple question would you like to proceed with this version i say yes so yes you can type y or since you can see y is in capital and n is in small this represent that the default value is y because it's a capital so without writing anything i can just hit enter and now it's installing package once this is done it's asking me for the you can say which theme you want for angular material if i go on this angular material website and i go on the right top just on the left of this github button you can see we have this icon which is saying that select the theme so these are the four theme which is available by default which here you can see they are asking one one two three four okay you can also customize but you can see how these different themes will look like if you try to change it so i really like the pink blue gray so let's use this pink blue gray this one by just navigating through my keyboard up and down key and once this is selected i can press hand enter it's enter now it says that setup global angular material typography styles i would say yes because i really want that and you can see by default n is there no is there because n is capital so i need to say y small y hit enter and finally it's asking do you really want to enable or include the animations obviously yes so hit enter once again and finally it's done you can see lot of things has changed so if i go on my source control it's not showing me so maybe i can reload my window so that it will show me that what has changed seems like something is wrong so what if i say git status it says that these files has changed so what are the file which has modified so angular dot json is modified here you will see that it has installed the angular material okay and angular lock file obviously package.json angular dot json and inside this angular.json the important thing is to see is style is given pink blue grey which we have selected and also on the test section the test part this style is added what next has changed it has changed app.module.ts go to the source go to the app and now you will find this app.module.ts file open it and you will see now it has added this browser animation module remember we have included and enabled the material animation and that's why we have browser animation module included here what next index.html and style.css so where is index.html index.html is available here and inside this that ng material installation has done these two changes or three actually so it has added the font for roboto and just for material icons okay and finally the style.css where normal css are given okay so much things are here and what i'm going to do i'm just going to say git commit with the message of installed material angular material done but i have to add this add everything before doing the commit so once again do the commit everything is fine let's now move now to get started with the use case of angular material like how we can use it we need to go to this part which is the component section so click here and now you will find lots of component on the left sidebar so you can see if i zoom this for you you can see lot of amazing components are available here and the very simple one i can show you by getting started thing is this button we need the button everywhere and angular material provide different kinds of button which is like basic primary accent one disable or a link but how do we use them so first thing we need to do is we need to go here on the home page remove everything and then only have a button let's see how we will do that let's go on the project on the app we in the angular everything is start with app.module.ts so app.module.ts is just a normal class which is exported but to make it a module we are using a decorator called ng model a ng module like this this one with some metadata which is like declaration import provider and bootstrap but declaration is for app component where is this app component it is app.component.ts so here we are app.component.ts this is again a normal class which is exported and we have some data inside it but to make it a component we have a new decorator called component with some again some metadata so here we have app.component.html and this file app.component.html is responsible for everything you can see here okay so what i can do i can just copy select everything and remove and just say h1 and maybe i can do a normal thing which is not not doing anything so maybe h1 will be hello angular angular and let's close this h1 tag so now let's see here we have angular material but we need the button let's go to the documentation and see how we can get it so this is just the introduction and what button can do but you can go on the api section here it's given that first you need to import mat button module from angular material button and then you need to add this selector type like matte button so this is the attribute we can add and if you are not getting this like how you can use it you can just go on the example and click on this middle icon this one or maybe from here so that you will find the html which is here so any button which is having matte button attribute will be treated as a material designed button so first i'm going to create a normal button here so button and this is something like oops button and then i say uh click me very simple if i see here this is a normal button and this is coming for from my browser this is the browser showing me the button style and designs but what if i just say mat button is this going to affect me no remember we need to import this mac button module but where we will do this import thing we will do on any module so what module we currently have we just have one module which is app.module.ts so we need to import first we say import from we have to say angular material and button like buttons but is that buttons no just button and what we have to do we have to import matte i can just copy mat button module once we have imported that we have to write that import here or we have to include inside this imports array so i can say matte button module once you're done with that save this file and go here reload and you can see style is now changed you can see if i click there is a ripple effect coming which is showing that this is yes a button so this is the simplest way i can show you that how you can use any angular material component in your application but it would not be good to have bunch of different different imports just to use a button or just to use any other component how we can create a dedicated file which is only responsible for angular material design right now we are good to go with any kind of component we want to use right now we are using this button but what if we want to use a card so just like the button we have we also need to import this card from card module from the angular material designing so let's import all these things go to our application open the app.module.ts and then just paste it and finally include that thing here now how we can use a card it's very easy just go like this maybe and we need to use this component matte card component so matte card component will going to generate a card for us so let's use that matte card on our app.html so i will say mat card and inside that we can have matte card header so matte card header and inside that we can have matte card title so this is the title and i can call it sarthak okay that's good and let's see how it's looking amazing we have a card but the problem we are going to face later on is suppose you have 10 or 20 different component or maybe 100 component so you are filling this import just with the material component and what about any other module so this is module for the material component only if you have any module which is not related to material design then this is becoming very confusing and it's not a good practice so what we can do how we can solve this thing remember angular is about the modules it's a modular framework so what we can do we can generate a new module for just for angular material so i can say ng generate module and we call this module as angular material simple or we can just say angular just just material material design maybe it's very confusing to give a name anyways we have created it now a new module is created inside material design and they call it materialdesignmodule.ts now we have this materialdesignmodule.ts what i am going to do i will copy these module from here which is specifically for angular material and then i will paste it and add these module here inside this import both of them just like this and then i'm going to use this material design module only in our app module so i will remove these two module and then i will only import one module which is we know it's like go upper directory uh how it's going to be so i need to go up a directory this will become app no so maybe i can say material design yep inside that we have material design module and we call it material design module and now include this module inside our imports of app module now what's going to happen it doesn't matter how many module for material design you are importing you always put that module inside this material design module module we have created okay so this is responsible for all other material design module which we are going to import is this going to work let's see now it says hey matt card is not a known element so what happen is when we are trying to use any module inside the app module we need to tell to angular that hey angular this module which is material design module also going to export and we are going to export whatever we are importing here so let's export it right like this and that's it so do we really need the import let's remove it and see if it is working or not it is working so what is the difference so when we say export that means that any other module can import material design module and if we are importing this material design these modules will automatically get imported on the different module which we are doing here so in our app module we are just importing material design but we said that if we are importing this we are also exporting some other module include that also but what if we have the imports only like we have the import for these two button that will be useful if you have something inside this material design directory which is only responsible or which is only going to use material design module so i think you get the point like how you can create a dedicated module where you can import or actually export all of the module you want from the angular material so that's very easy thing and finally save this file and you can see everything is working fine now since you know how you can import any module or any component how you can use different components using the attribute or directly using a simple like this kind of template or the name now it's time to really start working on amazing design in this course i really want to create something which is usable not just explaining you to the different different component so the design for any website starts in my opinion starts with a navbar so do we have any navbar thing so if i can scroll down at the last you can see we have a tool bar not an app bar but a toolbar it's okay we can do our things with the toolbar now this toolbar has different designs and also has a different component inside it but let's first start with the very simple toolbar how we can have it so first let's see what we have to import we have to import mat toolbar module obviously from angular toolbar and then we can use matte toolbar as the component name inside that we can define whatever we want as the name so let's try that on our application for that i will go here first i will open my app dot module dot ts no i will open app.component.html and here i will first use app toolbar and then i will say bitfumes or i can simply say ngmat this is the project name let's say okay so is this going to work it says hey app toolbar i don't know about that because i need to tell to our angular application that there is a material design toolbar thing so remember we need to import it on our app module so i can say import from at the rate angular and after that we need the material and after that we need the toolbar so it will be matte toolbar module and we can import it i know what you are thinking that we have created it but i just want to show you how things are going to be so we have some issue here let's go and matt toolbar module is good we are using it matte toolbar is looks something like this so how about using it matte toolbar not app toolbar i think you have spotted this error now you can see we have a very nice little toolbar but as you know we don't have to import it here because we already have created a material design module to import every angular material related component so let's open angular material which we have here let's just export it from here only exporting nothing else and everything will work absolutely fine that's great but you know i don't like this black color i want the default color so can we change it the default color is something pinkish red or it's actually pink so how we can do that let's click here on the code and scroll down and you can see you can define a color so now let's try that thing here i will say color is going to be primary so you have to write primary spelling correctly okay so i think i have written right and yeps you can see the primary color is here but this primary color is coming because we have selected a theme remember we have a theme we can also provide some other colors which is like von so warning which is for error like this we can also say x ascent i think yeah so something like that but what about i say blue okay it's not doing that it's coming to the default one which is a black what if i say any other color green no it's not having it but i really want to have a blue suppose so how we can customize this color for the matte toolbar there are many ways but a very rough way is just open this inspect this and you can see this matte toolbar is actually having a class of matte hyphen toolbar we can use and we can write the css using this class okay let's see so now i can go on my app dot component dot s css no it's just css and now i can say dot mat hyphen tool bar and i can say hey color is going to be blue if i save this file and go here it says color for the text i don't want the text color i really want the background color so instead of this i can say hey i actually need background color of blue whoa it's working yeah i know it's looking very ugly but this is the way you can actually modify things so if you want to understand more about any component of angular material you can go on the api section and then you can see we have this color thing and it's also given like selector is this class which i just have told you matt toolbar so you don't have to actually inspect the element and do and find the class you can directly get what class if we have from here so this is about the toolbar but you can see we can have the toolbar in various way we can also have a multi-row toolbar we can have different different kind of toolbar but in our case i really want to have a button called login that means on the right side here i want to have a login button where when i click i want to move to a different page called login page where we will design the login form but let's just remove these things and get back our primary color which i really like and that's why we have chosen it okay time for understanding about the button component once again go here and remember when i had started this course i introduced you this by this i introduced you with angular material by using this matte button module this means we already have it on our material design matte butter module we just need to see how we can use it so remember this one is the button thing is not having any different component you can use the native button tag or simply a anchor tag and then use the attribute called matte button something like that but we have different kind of button so let's explore each and everything and then we will see which one is suitable for us so we need to go on the app toolbar so go to the app.component.html here i need to have a button and maybe actually we are going to navigate to different uh different uh different page so that's why i need to have a anchor tag and let's say login but i want to have a attribute called mat button simple matte button now you can see we have this mat button here on the left i want that to be on the right so how i can do that there are once again various ways but we can write our simple you can say simple css for that so maybe can we give a class here called flex let's see if we inspect this and yeah whatever class we define comes here so since we have a class of flex can we do the justify content between and these two classes we have added but these classes doesn't exist in our css thing so let's add this on our global css because we want to use this again and again so i just say dot flex let's start with this dot flex means a class of flex means display of flex but when i say dot justify content between this means content something like that content justify so something like that justify content between like this space between so this means justify content space between now if i go you can see we have the login button on the right side totally on the right side that's good so yes we have different kind of button let's try each and every one so next is a raised button so what is the raised button so i can just say matte raised button so when i say raised button you can see it is now having a little shadow at the bottom plus we have a background of default color once again the color is default here so how we can change the color yes we know we can change the color just like we changed the color for the toolbar for that we just need to say color is equal to i'm not going to use primary because it's going to be same i'm going to say one and yeah one color is there okay so talking about the flat button what is the flat button let's see so if i say flat button then you will see there is no shadow on this it's a flat button so that's why flat next is a stroked button so a stroke button is actually just having the outside with no elevation with no shadow actually so if i say it's a stroked button now it's having only having the background and the text here but i want to have white color text inside it so maybe i can just remove this color thing from here that will become a default one and now you can see very nice outline with a white color of text this is the way we can use any other color we have defined here but remember we have some other kind of buttons also like icon button fab button and mini fab so let's talk about them and instead of this i can say it's a icon button and if i do that seems like nothing has happened but if i click here you can see there is a ripple of circular so what actually this icon is saying circular button with a transparent background this is really important it's a transparent background means to contain icon when we will learn about the icon thing in angular material we will see how it's going to work okay what about minifi or mat fab so if i say fab and if i go you can see this is having again a circular but this time the background is not transparent actually it's having the default one so this time we can change the color by saying this is going to be let's say ascent uh this is the ascent which is i think the default one what about one yeah you can see we have the one which is having uh orange background with a white text so you can play around with this once again this you can use it as a button or you can use it to hold the icon so fab means circular button elevated having default ascent theme okay now we also have mini so mini fab so what about mini fab so i believe minifeb means matte mini fab yeah matt mini fab that means a smaller circular button with elevated and everything is same but it's just a smaller version of matte fab okay so that's good and let's now create a simple button so we can call it is stroked let's use this and in that case i don't need any color so it will become like this okay so when i click i need to move to a new page which is called login page and let's do that we want to have a component for login page and we also need to add the routing so first let's create the component and we call it ng component generate first gen generate component and we call it auth slash login okay so auth login component we are creating and it has created a lot of thing for us inside auth we have login and you can see css html spec and the login component a lot of thing but what we are interested is we need to show this login works when we go on slash login so we have this app routing dot module and here we create an object with a path of slash login so it will be just login no slashing thing and the component is we need to import so import a component from and it's going to be from auth slash login slash auth uh slash login slash login component okay so it's a login component comes here that's it and we have registered this route we have created a component and let's go so if i go on slash oh if i go on slash login why it's not going so go on slash login uh nothing is working that's bad why is doing something like this so everything is fine but we need to tell to our angular that hey angular on the app.component.html just below this toolbar render every component for the routing and for that we need to say router outlet like this or you can use it self closing like just normal closing and you can see login works is here okay so this is good and now we can just work on a single component which is login component first what we need we need a form so we need a form but that has to be at the center so i'm going to create a div with a class of flex we already know how to do that then i'm going to also say that hey margin is going to be auto so i need to register this css also so i say hey whenever i say margin auto that means i'm going to say margin auto something like this okay that's good and inside this div i will add this form okay and let's have a h1 tag log in here okay how it's going to work let's see so to make it at the center we just need to have another div and have the margin auto here not here and then oops and then have it like this yeah it is at the center okay so we have here and how about creating a form so form field is here so let's start with the form field to create a login form we first need to have some input fields inside of our form so before going into the material design i just want to have a input field and see how this is looking so if i just do like this you can see we have very ugly or default input field but let's go on our material design and here we can see we have form field but along with the form field we can see we also have input and this input component is the one which we are going to use how we have to use it we just need to import matte input module from the material input let's do that first we will go on the material design and here we will add matte input module module and remember this will come from our material input now once we are done with this let's close this file and instead of having this one we need to use our material design input how we can use it we just need to add this attribute or selector called matte input okay that's the only thing we need to say mat input once we done with this let's go here and see still we are not having it do we have any error no we don't have any error so we are still not able to do that why because it says that matte input is directive that allow input or text area element to work with matte form field so we need to use this matte form field otherwise you can see it's not working that's why now we need to move to the mat form field component and use this one and we know we need to import this too so let's go on our material design module import mat form field mat form field module and this will come from form field and we have to import this one and now we can see still not getting because we need to add or wrap this input field with mat form field this component and now you will see the real magic you can see although we don't have any styling for this so that's why we are seeing almost nothing when we are not clicking but when we click we can see this is the real material design okay since we know that this is working we can once again go to the input field and see how we can actually modify this because there are a lot of ways we can change this so for the email field which we really want is going to have some placeholder okay and we can also add matte label on this so matte label will be like matte label and i'm not sure if it is really working or do we need to import matte label but let's first try this so let's go here and now click you can see we have this email which is the label so when i click on the input field we get this label which we were not getting when we don't have this matte label so it is working out of the box now if we have the email let's also have a password field so we can create a new mat form field and a matte label of password and then this is a type of password okay the input type is password i know what you are thinking something is wrong we are not able to see this and this should be just below of this in email field not on the right side we will fix each and everything but let's first create a button also which will maybe inside the form field but let's just create a normal button and this is a submit button so type is submit but we call it mat button or let's say raised button mat raised button and we call it login okay so yeah we have email we have a password we have a login button absolutely fine so this is our very ugly nice whatever you call but a simple form we can add more things we can add different different style of input field different style like this we can have the placeholder so what if we do a placeholder thing so let's see something is going to be crazy so for the email i'm going to call a placeholder like enter your email and then we need the password is enter your password so if i reload this you can see we don't see we don't able to see the placeholder thing if we inspect the element yes we have the placeholder but it's not showing here so that's another issue yeah i know it's very simple to solve this is happening because the color of placeholder is white our background is also white we will solve it by using the card when we learn about the cards so that's we have done and also what we can do here we can also make it like required so let's make it required both of them so required here and required here seems like we have some very nice thing which is this asterisk as soon as we added the required field we have the asterisk on both of these field which is for login and the password you can see so if i remove one from let's say from the email now i don't have the asterisk on my email so that's another good thing required will be there okay what next we can also add some kind of icon here so when we learn about the icon we will see how we can add but the first problem i need to solve is one these three things like email password and login button should be on a like a vertical or in a column and before that i just want to have a card level thing which is having a nice gray or blackish kind of background to show all these fields perfectly let's understand about the cards first let's go to the angular material documentation and here we can see we have this card component let's open it and as we know we need to import the matte card module so let's go here on our material design module and then we can see we already have imported it when we were trying the understanding how material angular material works so since we already have it we can just go to auth login login component html and move all these things all the h1 and form everything in a card so let's say mat card and cut that paste it like here let's see if this is working yes it is working nicely and this time you can see we have the placeholder enter your email like this and password enter your password with a login button since login button is a similar color we can change the color and we can make it colorful by having let's say ascent maybe yeah this looks good but the card is not that simple or i can say card is not that easy to use because card has many other things so the card has a title so matte card title right now we are using login here as a h1 tag here now can we move this into matte card title let's try this and see how this is going to look and here we are and now it seems like nothing has changed but actually we are having this through the matte card title and this is really amazing that we don't have to use any other component similar to that we can say matte card subtitle so what about the subtitle we'll say let's have mat card sub title and this will be like enter your email and password to login a little information and you can see in here enter your email and something something so you got the point next we have the matte card content so whatever the real thing you want to put inside of the card you need to have that inside of the content so we have the form and that form should go inside matte card content and this should close the form now everything is in a dedicated component so card title is in the card title the subtitle is in here content is here and now you can see everything is looking good if we have any image we can add the image we will see later how we can add the image but you can also add any action so in my opinion this login button should be on the action so like this actions so let's go here and say matt card actions will have this button and that's it okay so that's really great but you know if i do this we are not having that inside the form so what we can do we can cut this form and we can move these content and um the action both inside the form and it looks something like this if it is breaking we can get back to older way if you don't like it's up to you how you want to use it okay and finally you can also have a footer but in our case we don't need a footer right now but if you want you can have something written in your footer also that's for the matte card or material card but you can put lot of amazing things in the card just like this image and like and share buttons like that lot of amazing thing you can do with the card that's okay but remember what we need to do we need to first make these like email and the password not in a raw row we want that in a column so now we need to have the email and the password in a column so there are two way to do that one is using some kind of other component to do that thing or we can write our own custom css so let me show you one amazing component called divider so it just give you a line but that means it just move any item after this into the column so how do we use it it's very easy import this matte divider module on our [Music] material design and like this okay where i'm putting it now import it here that's it and now let's go to logincomponent.html and here after this email field let's have mat divider this is the component we have to use selector is mat divider so that's how we have used it like this now if you go and see now you can see email with a very nice divider line and then we have a password so we can also have this divider after this thing that means above the button so that we have a divider here also that's cool but you know there is one more way as i told you writing a proper css so how do we write we can see we have this card matte card and everything is inside this matte card so we can just inspect this card and see what class we have so we have the matte card class that's good we can use that class now if i open the login component dot css file we can say dot mat card will give me a display of flex and flex direction will be column so now if you see this is we have and if you want you can remove any of the divider if you want like here and here too and it should work but it's not working you know what because the form is holding these two so we need to make form also uh maybe we can just do the form display of flex and oops it's not a class it's just the html tag and now you can see we have email and the password aligned but i really like that divider above my button so i want to have mat divider right that's really nice but next what i want i want to have this card little below so giving some margin maybe so in that case we have this one and we can provide some class like login page this is a full login login page maybe we can say the card oh we have the matte card so matte card margin top is going to be 20 pixel maybe i can give it more so maybe i can say 200 pixels okay this is good but once again i don't like this small login card i need some width here so first i want to add some padding so padding off 20 pixel okay so maybe we can give 40 or 50 pixel that's good but still i need a form which should be having a width so you can see this is the matte card can we do a width of let's say 40 percent so if i do the 100 it's something like this okay so let's do that so this means width is 100 percent and it looks better now everything is really good and the next thing i really want to understand is using another amazing component which is for progress spinner and where we will use it see when we click on log in we want user to be redirected to home page and simulating it as a login successful but during that period we should create a wait time of two second and show this spinner so let's first see how we can import it once again have this on our material design like this import this one and now we are ready to use our spinner so how do we use our spinner it's very easy we can use two kind of selector either matte spinner selector or matte spinner so we can check on the example we want the very simple one which is matte spinner and let's copy that go here and check inside of the card and yeah we have very nice spinner but that spinner i want inside of the button so it will be like if we have some loading state then we show the spinner otherwise we will show this login button so right now let's just comment the login button and see this is very big we can minimize it and we can go to the overview section and here if you go on the api actually yeah you can see now we have a diameter in number we can provide it as a attribute so we can say dia meter is going to be 50 maybe just it's really big we can make it 25 very smaller how about 40 it's still i'm going to have 30 only so if i just do like this seems like this is this both having similar height okay finally what we need we need the click event of this button and then we need to have some kind of if statement like ng if and we can do that ng if we have is loading so is loading is a property we need to create on our login component so we say is loading a boolean one initially false okay but when we click on our button so when we click on our button then we need to do the login part so we can go here and we can create a log in and here we can say is loading is equal to true let's try this click on login something is not good and the problem is we need to call this login function like here and now if i click yep it is there it's very simple like we just need to say if ng if is not loading so not is loading so something like this click okay so let's have a little bit of diameter of 34 seems like 35 will be good now everything is fine and we want this loader to work for two second and then redirected to the home page let's do that so i just want to have a set timeout and this is going to be for 2000 second so initially it's loading and then after 2000 second we just need to say this dot router we need to create a router so router is coming inside of the constructor actually here private router as router like this and we can call this like here okay so this dot router dot and this time we need to navigate navigate to the home page okay so it will be like this okay that's good let's try this so click one two and now redirected to the home page wow this is really we want so click on login oops we have not added this thing on the login so let's go on the app component and on the login actually this would be like router link which would redirect me to the home page login actually and i forgot this is not view chase so this is like router link is going to be login so something like this click login here we are redirected to login click on login here as the button it redirected me to the home page wow now let's work on a blogs so how about having different different cards for the blog showing the image the title and then we click on the blog and move into inside of the blog so this is really great thing let's work on it so the very first thing we have to do is we have to create a button called blog which should lead me to the blog page so let's go to the app component just like we have a login let's create one for blog and redirect user to the block page okay so the button is at the center if i click nothing is happening because we don't have a blog component so first let's create a block component so ng generate blog and it's i'm calling it blogs so inside blogs hmm okay let's have a blog simple so i'm using blog slash blog because i also want to create a single blog so there is multiple blog which is a blog page and then we have a single blog if you don't want to call it blocks i have another idea for you you can call it blog page inside blog slash blog page and something like that it's now created block then block page and then i'm creating a single hyphen block like this single means single gle oh what i'm doing like this okay now we have two components and we want to register the blog page component on our router so just like we have this for login we can say block and this will be like blog page component okay now if i go and it says can't resolve blog blog blog whatever the blog is on the app so i think it has already registered something yeah so blogs component we have to remove single block component we need and something is wrong and everything is now fine yeah so click on block you can see it says blog page works cool okay so this is good block page works and what we want to show here we want to show multiple of the blog page a multiple of single block so single block is like this and let's use this single block here so i will say single block will be like this but now it says hey single block is not a known element because we need to register this component we can register this component on our app module so we can say oh we do we do have the single block so it should be there but it's not able to we are not able to do this single block why maybe we can see that selector is app single block not the just block so app single blog and yeah we have single block works now we want these single block to be multiple in case so one two three something like that now let me introduce you with the grid list this is exactly we need so it's very simple just copy this and comment this one for now and paste it if we do this we will get error says that hey you don't have this module so we want to import this module so copy this go to the app module and oops not on the mac we need to go on the material design module and then just import it okay that's it so now you can see one two three and four i want three blog in a row so now one two three and four so instead of having one two three as a number can we use this thing the app single block so here like this maybe i can do like here so app single block is having four times that's really nice so how about having it not just four but maybe uh five and six six times oh it will become seven so just remove one so we have six blocks now each block should have a card with the image and the title so let's go to the card because card is very usable component so go to the example and here we have the card nice little card let's copy everything for this card because we are interested in this and now we need to go into the single block so let's go to the single block component and paste it everything we have pasted let's see how this is looking wow looking great but we have some issue the image is cutted and that happened because of this thing row height two is to three so we can make it threes to one or maybe what about one is to one one is to one looks better but you can see if i go on the grid list we have hey great list yeah on the grid list we can define gutter size girder size is i think the space between two so maybe we can define the gutter size so good size is 10 like this and we have some issue oh it's it's a string right what it says something wrong happened so maybe we can remove this gutter size and we stick with this normal behavior which is the single one and i don't know what happened here oops i need to go into the blog yeah so if i do the gutter size of 10 let's see what's going to happen click on blog you can see we have a little space between them so maybe we can do the 20 and that's making nice little card okay that's really nice what if i remove this row height nothing happened i think one is to one is the default behavior for the row height okay so this is how we can add the block we call it now i don't want the footer i just want the header size so let's go here and i don't want the like share i don't want this content remove these things just the image and the title how about this looking good so now since we have all these nice little card we can call it and i can call it my best blog and comes blog summary here like this and that's really nice and if you want you can also have the margin on the left and the right okay so we have a matte card we can use this matte card or we can use this class anyone will be good and we will say that hey margin left or right maybe i can do something like 10 pixel and 0 pixel so it's i think that should be reversed hmm seems like everything is fine okay so if this is having just 10 pixel maybe we can move and on the block page we can give the gutter size also of 10 and what about having 5 because 5 and 5 so 5 on the left 5 on the right will become 10. anyways it looks better for the block section and now let's move to the single block and see how we will perform on that let's make this cards clickable and move to the my best blog blog and see how we designed that so go to the router create another blog slash my best blog and component will be it's going to be read blog or single blog single block we have actually used so we can name it anything else so i can name it post not a blog so blog is with this create a component called block slash post i know naming is very bad so don't worry about that just focus on learning about the material design okay so we have this and we need to make sure when we click on any blog that means on any app single blog we will go to the slash my best blog so for that we can go on a single blog and we can wrap all of these into an anchor tag like this and then we can say router link is my best blog okay so that's good and now if i click i move to do to the my best blog great that's how it work nice we have this thing and what next we need to design these design the single blog or i can say the single post so how this is going to be this is again having a similar kind of card but this time we want to have dot met card with a margin of let's say 50 pixel on left and also on right so if i click you can see left and the right we have the margin but now we don't want this image to be here so what we can do we can actually remove the image or maybe we can have image on the right side left side something like that so you can see we can have the image on the right side okay so something like that so click and see how we can move image on the right so it says matte card large image so we can define the image size here so on this case we can just say matte card large image like this and we are having it so is there any css to move the class on the right no so matte class [Music] anyways so we have title group and the title group will have it so i can copy this actually instead of making changes here so paste it and it says long text so long text i can copy directly so this is here long text instead of that i can just paste it to just show you how this is looking so seems like very bad design but it works so we can also make it extra large if you want like that and this is good so we have title we have subtitle we have right side of the image then we have some text and we can replicate this text many times so that we have large text something like this next what we want we want to have um a new thing which is called the chips which show the tags for this particular block we have so let's go to the chips and what is chips chips is having just like this kind of you can say button you can call it or whatever it is but it's defining that how many tags we have on this particular block copy that chip thing and go at the bottom and maybe we can define a matte card is there any footer thing so we need to go on the card so let's open card in a new tab and yes we have the footer so inside the footer i can paste this and this is actually going to have uh i don't want these things i want that chips like php and i'm not going to use ng4 so i just want to have something like this now it says hey chips is not imported so let's import this matte chip so material design chip module okay so that's good still it says hey mad chip list is not there okay so i can remove this and you can see very little php is written here but that's not good thing because i need a design something like this so actually i have not copied this properly so inside it paste it and make it php remove ng4 and i don't need any events drop event something like that i don't need any class and that's going to work yeah we have this php so if you want another one so maybe we can simply say angular so we have an angular one what if we also want one more like nest js and we have nest js wow so this is how you can use this chip to use anywhere you want so you can also use it inside any input field where you can have different different kind of you can say tags if you want to select something like that you can also define some color so let's define this color with the primary color so i just want to have this chips with the color of primary and also remove these two things we don't need now let's try it's not there what happened so if we check it for chip maybe here oh it has to be selected to show the color so maybe i can do something like this all of them are selected and all of them have this kind of color okay so this is about the chip and having a blog read thing inside of this material angular material now remember there is a notification thing always on various websites so there is a bell icon and on that bell icon we have some number which shows how many notification we have so for that we need the number thing so how about button toggle no not this one not bottom sheet badges yeah so here is the badge so we are going to learn about two things one is badge one is icon how we can add a icon and then we can add the batch over that icon so just like we have this home icon and above that we have number so we need these kind of things so for now i just want this to be directly here just on the left of the login so go to the app component and just before this login i want to have it so i can use a div so that these two will be yes placed left or right but now it says matte icon not available so for that we have to import the matte icon matte batch module actually so before that before batch thing we need the matte icon so is there any icon thing yes we have to learn about how we can add the icon so let's add the icon first and then we will see what is what will be the next error so this is here and now if i go you can see we have icon with batch and we have home icon which is really great because we have added this material icon link for the css and that's why we will be able to see this now we don't want icon with the batch the text we have like this so we can remove it we don't need this p tag so now you can see it's here on the left of this now instead of this how we can find any icon which we really want so just search for material icon and not here not on the font yes maybe on the font also you can search for i'm searching for bell icon so yeah we have various kind of bell icons so i am interested in a notification bell icon so what is the name of this i just only want names so see the icon will be having name here so the icon name is notification so i can just say the name is notifications so copy that cut that paste it here and see this is here wow that's good but above that we also need to have the number number like which we want on the batch like one two three four whatever it is now for that we need to import the batch module so let's copy that and go to the material design let's have this batch module and now if i check yep 15 is there i want a margin little bit on the right side so maybe what i can do i can first remove this thing i don't need i just need the and then i just need the icon and then margin right would be 10 pixel and here color is one inside instead of that i want accent color and now you can see it is good and you can make anything you want with this kind of thing so i can is really amazing thing in material design and in angular material okay next is i want to click on this icon and then i want to have a menu with the notification list how we can do that first we have to go on our app component and this one should be clickable maybe we can just see how we can have which component we can use to have a menu kind of thing so it just says menu is there so menu is very simple when you click on something it will open a list and on that list you can give anything you want so how this is working first whatever button or anything you want to have you need to give this kind of binding for matte menu trigger for and then you create a menu with the tag of menu and the name whatever you want and then this will open when you click on the button so as usual we need to import this first so let's copy that and import this okay that's good and finally we need once again go back like this and copy so how this is going to work let's first see so we have a menu when we click on menu you can see it's just showing me this kind of menu okay but we don't want this to be on any menu button we want this to be happened on the icon so let's just remove this menu button and now click on icon yep it's there and we can call it like uh we can say your friend got new car notification and second notification is you are tagged in sarthak recent photo like this so if i click i have nice little drop down or you can call it menu which is showing me something like this okay but we want this matte icon to be clickable so we want this to be a button so how about this remember we have a fab button thing so once again if i go on the icon and these are icon not on the icon actually on the button we can see we have a fab button where we can have any kind of uh icon inside that so we can have a button with a fab mini mat mini fab and then we can do whatever we want so we can just say button and this button will hold this icon but this clickable thing will happen on the button now if i go see yeah it's okay and we have everything but we need this to be a fab so we say matt mini fab okay so this is once again good but we want this to be uh let's say what if we have a fab fab is very big so mini fab minifig is good but i want that to be a transparent one so maybe we can instead of that we can just use this icon thing not as a fab we can use the icon so we can say ma matt mini fab is different matte icon button so mat icon button okay this looks amazing because you can see now the margin is also resolved and if i click it's become clickable we have the hand icon here that's become our notification whoa this is so crazy so easy and so amazing now we are able to understand how we can use different components from angular material but there are a lot of amazing component available here i'm will not be able to cover everything but i will try to cover various important one like the table which is really useful so let's have one uh one page where we can show all the blog as a table kind of back end thing where the admin is going to write a new blog post and then have different blog post in a table let's do that so i will create one more routing and that will be like uh admin slash blogs admin slash blog so i can say admin blog component component so obviously we need to create it so let's say ng generate and i call it admin block so admin block component is created and let's import this admin block component and we have it that means we can just see this admin works if i go on slash admin slash blog admin blog works that's great but here i just want to have and now i can say all blocks and all blocks will be having this table component now remember we always need to import this component so import this first like here that's good and then we need to see how we can use it so there are various things in the table which is absolutely important to understand how we can use the table on the table first you can see we need a data source for the table like what data you are going to show inside it you are not going to use any ng4 here all the data should be inside your component so just for now just for testing or learning purpose i can copy all these data which we have here and put it on admin blog so just paste it like this and then i can define this two things first this thing only which is data source now what i will do i can just copy this thing or if you just scroll down we have very minimal skeleton for the table now you can see the table is having data source of data source because the data source is given like this okay now let's see what happened something is not good it says that missing definition for footer header and row cannot determine which column should be rendered so what happened here actually what happening is whenever you define a table you also need to define among the data you have what are the fields you want to show this means if you go here it says displayed columns like this so displayed column is position name weight and solve symbol so it's like where is that yeah name weight symbol and position is serial number okay but where we are defining that which is displayed column so displayed column is like this so we create a table row then we say row it's a header for the row so that it will put the name and matte header row definition will be the displayed column so something like that so i can just zoom out paste it like this and on this part i can paste all these definition for the displayed column so column is defined and still it says hey everything is good but id in the position is not available so for that let's go to the documentation once again and here if you scroll down we have a lot of information about how to use it but actually we need to go from top to bottom and after having this table we need to define the header cell which we have done with this like here okay but now we need to say to the table that hey table i want to display a column from the column list we have so what actually we are going to do we just need to put this component here so matte text column and we need to name which is position so let's now see and this time it's giving error for name so what actually happening whatever we are def we have defined here like position name weight and symbol data table is trying to find this component for each of the column name we have here so first it has given error for position we have added it now it's giving error for the name so what if we provide the name also so we say this is a name now if i go it's i asking for weight so yes you can remove something from here also it's up to you what column you want to show so you can see now we have the very nice header with the position and the name as the header text but we also want the rows for the data so we have the header row but we need the data row also for that once again go here and remember when we have defined this matte header row we just need the normal row so copy this line and paste it just below this one and define the property which is having columns name so we need to put it here and here let you can give any name you want so let's say row data just by doing these two things and defining which is the column name you really want to put you will be able to see now we have very nice table here okay so this table is good but if you really want to have more content like weight and symbol then you always need to put the name here so wait and what's that symbol symbol so that comes here and this is here now you know if you want you can move symbol like this and it doesn't matter where you put that because what matter is how you have defined it so what if i move from symbol from here to here and now you can see symbol is before the weight and once again you can see it is very compact the designing for i can say the css is bad so maybe you can use some other system to make it big we can just give a style of width hundred percent and you can see it is now filled okay so all these things are really great and we need the data as for our blog so what i'm going to do i'm going to change this data and then i will come back to you so now you can see all the data is here and we have five similar blog it just for demonstration so i have blog with the id title body image and published at now what i need i need to show id here then title but i don't want to show body in the list so i will skip that then i need to give maybe image and published at okay these are the fields we need to show on our table but if i go you can see it's not giving anything because now here we need to change it so it will be id then title then image and published at okay everything is really good so you can see all these data are here but i just want to modify it and change it according to myself like i want to give the title or the header as published space capital a and t what if we do that if we do that it will say that hey there is no column like published space act so how do we change it also i don't want the image url but i want an avatar of the image here how we can do that also now how we can modify the header and also the content of each of the column row so for that we need to go to the documentation and if you see on the overview section we can define or we can define a column template by using ngcontainer with mat column definition giving the name for which we are going to modify then we define the header how it's going to look and how the row will going to be so copy this from here go back to our text editor and here instead of this thing the published act field i just want to have this and i will say that hey i'm going to modify for published at field the name we want to put on the header will be with a capital p published space at and now we call this as data and it will be like data dot published at now see the magic here if i go you can see it is published space with capital a as a at and then we have this thing now come to the image part here once again instead of this thing we put it like this and for which column we want to we want the modification for the image or we can call it thumbnail if we want like this once again this would be the data and we say data dot image okay so now we have changed the title to thumbnail but still we are showing the url is it it will be good if we just show the image tag so let's say img okay and the source will be this thing the data image but it's very very big we don't want that so we can just modify it and we say width is equal to 50 and the height is equal to 50 and yeah that's nice if you want you can put more styling over this and if you want to have it we can go to here and we say for the image let's do uh border radius of let's say 50 or 50 pixel and you can see now it become rounded that's great so this is how you can modify the data and put whatever you want now you can bind it this something like this instead of using interpolation and this should work cool if you want to modify the date to look this date in a better format you can do that also now since we know that we can modify any column we have for the header and for the data rows also but now what if we want to add something which is not actually available in our data source so consider it like an action column where we have a delete button or edit button for these blogs so let's see how we can do that first we need to use this matte column definition so we can define a new column we call it actions and then we say the title is going to be the actions and here for each of these table or table row i want to have a button and button will be delete and edit so we call this matte raised button and color will be the warning color and for this same thing but color will be let's say edit will be ascend and delete will be won but we are not able to get that why you know we have this matte header row where we are defining what are the columns we need for the header that means we need to add the custom column name here and for this column we have a definition in this ng container really cool but we have some issue actually this is actions not just action so let's do the actions and yep you can see we have very nice two buttons we can give a little margin here so style margin left is 5 pixel or maybe 10 pixel [Music] yay we have these two buttons here with a new and custom column we have defined inside of our table and now let's do the delete part so what should be the delete scenario once we click here we should get a pop-up and pop-up will say that are you sure you want to remove this blog we will say either yes or no if we say yes we are going to remove it otherwise we will do nothing how we can do that first we need the click event so i say on the click of it i just want to say delete okay and we have to create this delete function on our admin component so let's go and say delete and for now i just alert asdf so click on this and yes we have this alert but what we want to delete we need the id so how do we pass the id remember for every table row we are having this data so we say that data dot id will we are passing and we can accept the id here and that means we can just check if we really have the id or not an id is going to be a number okay now click we get one click we get two that's great but you know we need first to create a pop-up so for that i am going to introduce you with another amazing component which is dialog component so it will be something like this you can have it any way you want so how do we add it once again we need to import this importing on material design a lot of imports we have and that's good how we are going to use this one so maybe we will go on the example it's very slow no without animation we can also check a simple one yes this is a little simple okay so see what happening here when we click on any button and we call any function here it's a open dialog function in our case we have a delete function actually this method so what happening here we are using this dialog ref and we are actually using the dialog which we import in our constructor and then we provide the new component we will create to have the content of the dialog box so how this is going to work let's see first which is very important we need to say public dialog uh what is the spelling of dialogue yeah it's right dialog matte dialog okay that's good now when we do this when we click on the button we call this method and we say this dot dialog dot open but when we say open it says hey give me the component you want me to put inside of the component inside of the dialog box so instead of creating a fresh whole new component i will just create a component like here so i will say export const export class explore class delete dialog this is the name i have given and now to make it as a component i need to say uh like a simple component decorator comes like this which is something like this and inside here we need to define selector selector is delete dialog and then template uh template let's say let's just use the template here and we will say are you sure you want to delete question mark and now we use this delete dialog here so basically we say that hey matt dialog open this dialog component we have okay let's see if this is going to work click on delete yeah we can see we have the are you sure you want to delete that's great and when we click outside it's just just uh it's removing it's just disappearing this one very very nice so this is done but what next we actually need to have a button here and we want to interact with that button so how this is going to work first instead of having good template we will use the template url and we define delete dialog dot html delete dialog dot html and this we are going to create inside of our admin blog so delete dialog dot html and now i will put h4 are you sure you want to delete question mark question mark then we will use the button but let's see it says they can't find delete dialog.html and so this is happening because of double html i put here so i just remove one and it should be available but it's not maybe i can put it in a different way it should be there maybe we can also try one more the dialog dot component dot html let's try this one and i think yes we are having are you sure you want to delete with this but we want to add buttons so let's have the button system here so you know when we have this slow button so we have no and we have ok so we have two things so how it's working we need to say first on the html you can see we have some div we have some buttons and we can copy everything from here cool so let's just copy and paste it on our html we have and yeah would you like to delete this blog okay or instead okay i say yes or maybe say delete or simply cancel okay so like this okay so this is good delete and the two buttons are here but this should be having a button with the design but it's not giving me the proper design for so that's because of the issue of material design this is this is the bad part of creating a modular material design because now with this delete dialog block component we don't have the designing for our buttons so either we have to create a whole new component and import the material design or go with this only okay so we will do that later but let's first see how this is going to work so what happened when we click on yes or we click on no so right now this one is not giving any information so we can go at the bottom and here we have a nice little information and first we can see we can create a click event inside of the dialog and we have created the component here so we can use this method to close our component by a button so on the cancel i just say hey when we click on this cancel just do the close but this will be on this component but you can see now we are starting to have more information on the component so it would be good to create a new really new component called delete dialog dialog okay so now we have created a delete dialog component and we can move this content from here remove this delete dialog dot html and now we have delete dialog component dedicated component and now on the admin we have this one we can delete it totally and now we can use delete dialog component as the real component okay so once again if we go we should see it it's working but now it's asking for the close method so on the delete dialog we have created we have this component and let's now create a close method and here we just need to say this dot the dialog ref dialog dialog ref dot close but we need the dialog ref which will come here so public dialog ref is dialog ref and providing this same class okay now it's good let's try click and now you can see we are having this uh nice little uh material design because now we have dedicated component which know about the dialogues and material design so click on cancel and yeah it's closing by clicking on the cancel what about delete delete is also closing we don't want that to happen and what if we just remove this thing and we say that hey it's normal button you can see if i click on cancel nothing is working but deleting click is working because we have mat dialog close this is the one which is actually closing the dialog box so instead of creating that method to close we can just say matte dialog close and in that case we don't need this all these ref thing okay but still we are now on the place of how we can say that yes delete the block so it's very simple when you define something like hit this on the mat dialog close then this information will be available once you close the dialog box so right now you will see that cancel is also closing and delete is also closing but we can do one really amazing thing let's go to the admin block component where we are we have the delete for the dialog we can define or subscribe to the close so this dot dialog dot after close so we have after all close or after close okay so we need to have a dialog ref actually which is this one and then we can do the dialog ref so const dialog ref is this one and now i say dialog ref dot after close and here we are dot we want the subscription for it so we call this function and then subscribe so we call this function and then subscribe and subscription will give me the result okay so on this result i can just alert result like this go click on delete click on delete again and you can see we are having true why we are having true only because remember on our dialog component we are providing it true if we say anything and we click we get anything so now instead of this we want to pass out the we want to just say true now i will say if result is equal to true then actually i need to say as a string then we just need to say remove this one so removing from the element data we have so we can remove that from here so i can just do a simple alert and say yes blog is deleted but blog is deleted yeah that's good so now that's fine click cancel nothing is happening click delete and say yes blog is deleted so great now the very final thing is just move all the content we have from here to inside of this component so now i will call something like this so we have this data source directly having this array so that we can modify it we say this dot data source is equal to this dot data source dot filter and we call it data data dot id is not equal to the id we are passing so if it is true then just remove this one okay so final click on delete cancel it's not deleted click delete and you can see one blog is deleted and that was the third id if you want to delete the fourth one so you can see now we don't have the fourth id so this is how we work with the angular material design we have learned so much about the angular material and still we have left with really great other components but i think you got the idea how you can explore the documentation how to use every component and this knowledge will enable you to use any of the component from this documentation and how you can modify the classes everything but before closing this course i just want to deploy this project to netlify so i will say netlify netlify so let's open the netlify and here click on add new import from my github but first i need to put it on the github so let's go on the github bitfumes and create new repository and i call it obviously on bitfumes i call it angular material 2020. so angular material course 2020. and it's a public one create repository and we have to link this repository here so just paste it everything is going to be pushed to our repository reload and yeah we have this now on the netlife i just click on this once again let's start from basic so once you logged in you have created the account it says add new from existing project it the project is from github so we connect the github it's authorized now i just want to change the you can say organization and here i search angular material so material yeah this one okay so this is good and it says hey you want the main branch now what is the base directory and how we are going to run this now since we don't know what should be the command and what should be the directory we need to go on our local environment so first if you go here open the package.json you can see we have one for ng build or npm run build so let's do that npm run build and see what's going to happen so it's generating our application for the production build and once we are done with this we will have a new directory here which we need to put it on this so published directory so you can see the publish directory is yes the dist directory but inside that we have the angular mat course this is the actual directory we need to put so let's put this name here dist slash angular matte course npm run build is really good and everything is fine so let's click on deploy now we will see when a within few minutes our application will be available live and netlive will provide us a basic subdomain to work with okay so let's wait for this to complete and very soon our application is deployed and we can click here to see what we have amazing amazing you can see whatever we have design is here we can see everything is really nice we can do the login we can go to our admin slash blog thing and it's not having i think it's having different url no it's admin slash blog so this is bad uh we are not able to go there so if we go on the login it's working but if i directly go on the login it's not working so to fix this issue we need to actually create a redirect underscore redirects file and inside that we need to put this content which is saying that whatever comes after the domain name move that thing to index dot html with a status code of 200. if you're not getting it don't worry it's just saying that hey if say it's if it is login give me the login page okay but this is not just enough we also need to tell to angular that hey angular this redirect file is there okay so for that we need to go to the angular.json scroll down on the assets part and here create an object where we define glob glob is redirects then we also need to define the input is source and obviously the output is slash once we are done with this we just need to commit this add redirect underscore redirects file and then let's push this once you push this netlife is smart enough to pick that commit and if you reload this you can see now it is building with the latest commit we have add redirects file okay so we just need to wait very little few minutes or less then we will be able to see if we refresh this page our application will surely going to work and finally it is published and this means that if i now go here and reload this page you can see now we have our application running perfectly this means i can now go to admin slash blog and i need to go to the admin slash blog and yeah we have this and this is working absolutely fine great so if you like this episode please give it a thumbs up and don't forget to subscribe to bitram's youtube channel we will meet on some other course till then goodbye

Channel: Bitfumes

Views: 13,324

Keywords: angular material tutorial, angular material form, angular material dialog, angular material table, angular material tutorial for beginners, angular material, angular material tutorial 2022, angular material project, angular material ui, angular material course, angular material course 2022, angular, angular tutorial angular ui

Id: DaE_RpWRlJI

Length: 135min 46sec (8146 seconds)

Published: Tue Sep 06 2022