create menu in angular using material UI components | |Angular 15 - Material UI Tutorial

Hello friends welcome to my channel here at the keys this is our angular 15 material UA tutorial and the part of this video I am going to create menu in our application using material UA components so the below components are going to cover the first one is toolbar the next one is menu then icons the final one is button now let me go to my existing application there I am going to start the implementation here the first step is we have to import the required models so let me go to my created material way model and as I mentioned I am going to use the four components so then I have to import four models so we can do one by one so the first one is toolbar and the model name is matte toolbar model okay and let me include it here and the same way the second one is menu and the model basically it is start from math then our control name so end with the model okay so this is the common pattern and the third one is icons the procedure is common for all the models and the final one is buttons okay so now I have imported all the required models the next step is I am going to create one component so the common name is menu bar okay the component is created so let me copy this selector then in our app component so in the top of that we can call this one okay and we can comment these two items so let me save this one and in our menu bar component we can use the matte toolbar okay so inside that we can Define our buttons home first we can add some common menus okay about then contact so in this button we can use one directive button so let me include in the three buttons okay now let me see the output okay see so we have the menu and the three buttons okay now let me provide the color primary see now it is changed into blue color okay and the next thing is we can provide the application name material UA tutorial okay then I am going to include one CSS example spacer so let me copy this one see now so our application name and the menus are moved into the right side okay and here we can include some icons and instead of the Mac button we can include this matte icon button okay and here matte icon so there we have to provide some name okay home so the similar way we have the N number of icons so that actually we can use so if I'm putting like this menu we have this menu icon see it should be fine right so the next thing is I am going to include one class that will give some better look and feel mat elevation is at six see now and in case if required we can just add this this one okay great we have completed the basic menu okay the next thing is I am going to map the router and also I'm going to create one nested menu okay see this kind of registrator so for the home let me create one more new component okay the home component is created and whatever I have commented here let me cut and remove to our home component okay and in our routing side so here we can include our home components and the part should be empty okay so now in our menu bar we can include this a router link so for the home it is the empty only and in the icon also I'm going to include the same thing next about we don't have anything so anyway let me include it okay so instead of this Abode I am going to include us the input because we have our own component the name of input and the second one is autocomplete because both the topics are we completed in our previous videos okay so let me save this one we can see so initially it is in the home page okay so if I'm clicking input so it is redirected to our input component and then autocomplete okay so again if I'm clicking this icon it is simply redirected into our home component okay so next let me tell you how to create the nested menu so after this home I am going to include one more button with the name of Master okay so here we can remove this one and in this button I am going to use the property matte menu trigger for okay level 1 master and here I am going to use this map menu and then that ID equal to map menu okay so here we can include our sub menu socket so for that I am going to include the button the first one is company and the second one is customer finally product and here I'm going to include one more directive matte menu item so let me include for these three items so now we have this master so when I'm clicking this one see it is coming like this this is the first level so next I am going to create the menu for this company okay it is kind of a tree switcher the procedure is same so let me copy this line matte menu trigger for so we can include it here and the name you can give like a company then customer and finally product so the next step is we have to define the required matte menu so the name is company so then we have to put like this and let me remove this trigger event so in this company I am going to have three menus term tax currency okay and the same way I am going to create the supplement for our customer for the customer I am having customer type so there are also I'm just having this tags okay and finally I'm creating supplement for our product so you need to have measurement for the example purpose only I just added some of the items you know so the master how the company so instead of the company we have three minus term tax currency so instead this customer I'm having two items and in this product I am having three items okay so still if you want to include some other items also we can do so I'm just doing for this variant I am going to include two more menus the color and the size so first we have to add this property for this variant right then we have to provide the name so next we have to Define this map menu so the same name we have to use in our matte menu so as I mentioned I am having two menus I mean sub menus color and size so let me refresh the screen you know product okay this is the way we can create the menu we can have n number of sub menus also so as I mentioned this video covers below components like a toolbar menu icons buttons so let me provide some overview okay so based on our requirement I have included some of the items so now let me go to this bottom side so if you go to the official site of angular material UI we can see this button where it is okay so here see we have a lot of options okay buttons the basic buttons are raised stroke to float see the output it should be like this so if you want to use the steps are very simple so first we have to include this button tag and then we need to use the directive So based on the type the direct you only vary in see so mattress to button then Matt struct button matte flat button and if you're required we can use the color also see so the blue colors are primary then Ascent one and if frequent we can create some custom classes also so let me take this ascent so the same color that actually we can apply for our menu also okay So currently we have this primary so that's what it is coming like this so in case if you want some other things you can change it see the menu so it is completely changed okay so in this way we can change our color also now let me revert it so we can have this primary and the similar way if required we can include some custom classes uh we can change this color and initially we have used the basic button okay now I am going to include one this matte raised to button we can copy this one so in our menu at the end let me include this one so the text we can give like a sign up and this color is fine see it now okay this some model looks fine the similar way we have n number of examples so we can use based on our requirement the similar way let me go to this icon so the icon also very simple so in the first example we used right okay this one so let me copy this one I'm going to include it at the end let me remove this router see so just a button so after that we have included this matte icon Button as the directive so inside I am using this matte icon and finally whatever name I am providing so this is actually a icon name it will show the relevant icons okay so in this menu example also sorry for the inconvenience okay since this button also at the bottom they are showing right see some of the icons if you checked this example they have added this favorite and menu and this opening menu so the similar if you want use n number of icons so just search like angular material UI I can list here we will get a lot of items so if you take this dashboard see the dashboard symbol and the similar way I believe we have this notification a telephone call and some other things so message I can means just SMS you know so the SML symbol is coming and notifications see so the notification icon so I just shown around the three to four examples the same stuff you have to apply for any icons and the next one is uh this menu okay see so they have used some of the examples so there are two items are showing in the next example I believe we have the lot of items and this example side so if you checked the procedure is common for it so inside the button they have this matte icon and also the span tag so span tag will show the name and the icon will show the exact icon and the disabled property was there if you included this disabled so then the result should be completely disabled so that's what we have seen see so there are three menus the second one is disabled okay so this is all about the menu and the final on this toolbar so in this toolbar also they have used the icons only so if we go to the example see this is the base icon on the multi-level and they have provided some of the suggestions So based on our requirement we can form our menu and we can use the menus and like icons and buttons okay so now we are in the end of the video still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel so in my next video I will come up with one of the interesting topics so please be stay tuned thank you thanks for watching

Channel: Nihira Techiees

Views: 7,432

Keywords: Angular Material Tutorial, Angular 15 - Material UI Tutorial, Material UI Course for begginers, angular material UI example, create menu using angular material UI, toolbar in angualr material UI, angular material UI Icons with example, material UI menu in angular, create angular material menu, menu component in angular material, menu bar in angular material

Id: nz0hPdvrCg8

Length: 18min 14sec (1094 seconds)

Published: Mon Apr 10 2023