Angular Material Tutorial | Mosh

[Music] in this section we're going to look at angular material which is a collection of components and give our applications a modern look and feel more specifically you're going to learn how to work with various kinds of components such as form controls icons dialog boxes progress spinners tooltips and so on you're going to learn how to use the pre-built themes as well as create a custom theme you're also going to learn how to use angular materials typography and create custom typography for your applications this section is fairly long so it's best to watch it over a few sessions now let's get started so what is angular material angular material is a library of reusable and high-quality UI components that are built with angular and typescript these components are internationalized so users with different languages can use them they have a clean and simple API they are well tested with unit and integration tests they're customizable they're very fast and have minimal performance overhead and they are almost well documented so let me show you a few examples of these components in action if you head over to material dot angular io you can see the home page for angular material here under components you can see we have various kinds of components we have form controls like radio buttons checkboxes and so on we have navigation component like toolbars menus we have layout components like lists cars grids we've got buns indicators and icons pop-ups and models and data table so let me show you a few of these in action the first one I want to show you is under form controls so here let's go to this check box so here on the examples tab you can see these check boxes and radio buttons in action so these check boxes have the same API as the native check boxes we have used so far but you can see they look very pretty and they also have some nice animation see that so very nice now we can easily add these to our applications by using angular material let's take a look at another example so back to the components page this time I'm going to show you a model so under pop-ups and models let's take a look at a dialog once again under the examples tab so here we have a button launch dialog and when we click this we get a dialog with a nice animation one more time see it has a very nice animation a question that you might have is that we already have the concept of dialogues in bootstrap so why should we use this dialogue in angular material well bootstrap and angular material as you know there are two different libraries built by different teams bootstrap was built a few years ago using plain old JavaScript and it has nothing to do with angular so all that javascript code that we have in bootstrap libraries we cannot easily use them in our angular applications we need to create custom directives or custom components and do some magic in order to use those components angular material on the other hand is built specifically for angular applications so we don't have to do anything magical we can simply import a module and use angular material components just like how we use our custom components also in terms of the a statics bootstrap has a different design language all the bootstrap components have a different look and feel whereas the angular material is based on the material design which is a visual language developed by Google in 2014 this is the same language that you see in Google+ in Android and many other applications so to answer your question you can use bootstrap you can use angular material or you can use both angular material is still new it doesn't have all the components that we have in bootstrap so if you want to build an application with a complex user interface chances are some of the components that you need may not currently be part of angular material so then you might have to use bootstrap but as I told you before because we cannot use bootstrap javascript easily in our angular applications we have to use third-party components that are based on bootstrap and that means our application is going to have a lot of dependencies to libraries built by others and these libraries can break at any time so that's why I personally prefer angular material because all these components are built with the same list of quality standards they have a common API they're well tested and we can easily use them in our angular applications so enough theory next we're going to install angular meteor in our project in this lecture I'm going to show you how to install angular material now before we get started I just want to let you know that you don't have to memorize any of these steps I'm going to show you in this lecture all of these are perfectly documented but you might find it easier to watch the video first and then look at the documentation so in the future you can always go to material that angular that I own under this guide page you'll find this guide getting started and this shows you all the steps that you need to follow in order to add angular material to a project so now let me show you these steps in action first in the terminal just like the previous sections I'm going to create a new project using angular CLI so ng new material - demo all right beautiful now let's go to this folder material - demo here we need to install a couple of node packages so NPM install - - same the first one is angular slash CD k and this stands for component development kit this component development kit is one of the dependencies of angular material and it's basically a library that allows you to build awesome components for the web but without adopting the material design visual language so if you want to build every usable data table that doesn't necessarily have a material design visual language you can build it with C TK in an agnostic way so this is the first dependency we need to install and the second one is the actual angular material package so at angular slash material so these are the essential packages that we need to install now optionally we can install a couple more packages one is for adding animations the other is for gesture so if you want to have those nice animations also install at angular slash animations and finally in order to add gesture support you need to install hammer Jas so hammer Jas so hammer Jas is a powerful library that allows you to add gesture support to your pages for example you may tap with your finger or swipe or rotate and so on now once again this is an optional dependency but I recommend you to add it to your application to make it more accessible right now let's install these dependencies alright so the first step was to install these dependencies next we need to include a theme so let's go to visual studio code here under node modules under at angular you can find the material folder and here we have these pre-built themes so we have a bunch of themes there beautiful the one I'm gonna use is in Diigo - pink but you might use any other that you prefer so let's go to styles that's CSS we need to import a theme just the same way we imported bootstrap before so hat import and here we add the relative path from node modules so start with a tilde at angular slash material slash pre-built - themes slash in Diigo - pink dot CSS make sure to spell it properly otherwise it's not gonna work so this was our second step and now the final step we need to go to app dot module here if you want to add animation support you need to import browser animations module otherwise you need to import no op animations module so let me show you so if you previously installed angular animations you need to import browser animations module from at angular slash platform - browser slash animations okay so this is the implementation of the animations module in a browser now if you don't want to have animations instead of browser animations module you need to import no op animations module so I'm going to select this line duplicate and change this module to no up animations module so now we need to import one of these modules into our ng module so here in the imports array I'm gonna add browser animations module so these are the three steps that we need to follow in order to install angular material now to make sure that we have installed angular material properly let's go ahead and add a checkbox to our app component so let's go to app dot HTML I'm going to delete all the mark-up here and add a checkbox so that's MD - checkbox now let's give it a label subscribe to news letter so in angular material we have a custom component for rendering a checkbox and this MD - checkbox is the selector for that component now back in the terminal we need to serve this application okay it's ready so back in the browser we get a blank screen so let's take a look at the console we see a familiar error MD - checkbox is not a known element because we have used a custom component but we have not imported this component into our app module so let's go to app that module every component in angular material is defined in a separate module so we need to go on the top import this module here and then add it to the import array of our ng module but how do we know what module a component is defining very easy we go to material that angular that components form controls checkbox now under API you can see the name of the module in which this component is defined so this component is defined in MD checkbox module I'm gonna simply copy this line back here paste it let's reformat it okay and finally add it to the imports array MD checkbox module save back in the browser alright now we have a beautiful modern check box with animation so over the rest of this section we're going to explore each of these components in more detail alright now let's continue with this checkbox we added in the last lecture so this checkbox component in angular material implements a very similar API to the native checkbox we have in html5 for example in html5 in order to add a checkbox we need to use input with a type checkbox okay now here we have a bunch of attributes like checked we can set it to checked you have value you have to change event and so on so our custom checkbox in angular material also has these properties so once again if you go back to the documentation for this component under the api's tab we can find all the properties implemented in this component so here under directives we can see the name of our component that is MD checkbox and below that we have a table with the list of all the input and output properties now there is not enough time to go through each of these properties and it's really pointless so I want to show you a few key properties that you're going to use in a lot of real-world applications so right here I'm gonna delete its native html5 checkbox now here's our MD checkbox here we can set the value exactly the same way of a native checkbox or we can use property binding combined days to a field or a property in our component similarly we have the checked property we can set this to checked to check this by default let's have a look back in the browser so now our checkbox is checked by default or we can use property binding and binds to a field or property in our component so let's go to app that component here I'm going to define a field called is checked and set it to true now back in the template I can bind this check property to is checked same back in the browser so we can see is checked by default we also have the change event that we can subscribe to so let's plan this to unchanged method in our component and here we can pass the event object now let's go ahead and implement this method in our component so back here I'm gonna add this unchanged method and for now simply lock something in the console back in the browser so click this now look at the console so this is our event object it has two properties source which references our MD checkbox class and checked so here's our MD checkbox you can see all these properties implemented in this component now let's say we have some content here let's say we have a div and this checkbox acts as a toggle to show or hide that div for example we can change this label to show details here I'm gonna add a div and in this tip we're going to have some details okay now when the checkbox is checked this div should be visible so here we can use ng if now here in this expression we need to reference our checkbox so we can simply give it a template variable let's call this show details and here we can reference show details dot checked property okay so back in the browser okay you can see our details div is initially visible if I uncheck this it's gone so this is how we work with angular material check boxes another component that is very similar to a checkbox is the radio button so I can angular material website under components page let's go to form controls and look at this radio button so as a quick tip whenever you want to work with a component look at this overview tab here you should see a very simple example of using that component so here's our radio button now if you click this view source you can see the mark-up that you need to write to render this component so here we have two elements MD radio group and MD radio button so we can put all these radio buttons inside a group and in that group only one radio button will be selectable and of course we can have multiple groups on a web page so back in vs code I'm gonna delete this checkbox here instead we need MD - radio - group and inside this we need two radio buttons MD - radio - button times - beautiful now here we can give each bun a label like male and female I can give them a value they can hard code the value here or use property binding syntax and bind this to a field or property in our component similarly I'm gonna set a value here you also have all those properties you learned about in the last lecture so we have checked we can hard code this here or use property binding and bind this to is checked filled in our component save back in the browser we got a blank screen so let's take a look at the console now this error is a little bit distracting it says can't bind to check since it is an unknown property of MD radio button unfortunately the errors in angular material are still a little bit image sure so what's going on here back in the coat I'm gonna temporarily delete this bit of code SAVE back in the browser we don't have any errors anymore but if you look at the web page you don't see the radio buttons the reason for this is because we didn't import the module for this radio button now technically I expect to see an error like MD Radio group is not a known element but we don't get that error it turns out that there is something common between the checkbox and the radio modules so because in app module we imported this MD checkbox module we don't get that error saying that this radio group or radio button is not unknown element if I comment this out see what happens back in the browser okay now we got a blank screen and if you look in the console you see the error I was talking about so MD radio button is not a known element so here's the lesson whenever you want to use a component make sure to import its module first so back in the documentation for the radio button look at the API tab here is the module that we need to import MD radio module so I can app module I'm gonna import another module from angular slash material that is MD radio module and then let's add a line break here okay so then in the imports array you're gonna have the checkbox module and the radio module now something I need to clarify here in this demo I'm not using a checkbox so technically we should not import this MD checkbox module but I'm deliberately leaving this here because later I want to show you a technique to refactor our code so we imported our radio mode now back in the browser these are our beautiful radio buttons so now I can app component I was gonna use this property binding here to automatically check the female radio button let's test this back in the browser so we can see female is checked by default now if you look at the documentation for this radio button here you can see the MD radio group class or MD radio group component here we have an input property called value so we can set the value of the group and this will automatically check the radio button with that value for example back here I'm gonna remove it's checked property so the value of the female radio button is zero I can set the value of the group to zero and this will automatically check the female radio button and once again the female radio button is checked so you can see these components in angular material are very easy to use all right now let me show you how to render a drop-down list so once again on an angular material website under the components page let's go to form controls and then select just like always we go to the API tab first and find the module in which this component is defined so it's MD select module so before going any further let's import this module into our app module so here in the imports array I'm gonna add MD select module and then import this with my auto import plug-in okay good now back in the documentation let's go to the overview tab and look at an example or the basic markup we need to render a drop down list so here we have two new elements one is MD - select and the other is MD - option these elements are very similar to the native select and option elements we have in html5 so back in app that component that HTML let's add a native html5 drop down list and then converted to an angular material drop down list so we had select and inside this we need one or more options now we don't need the name and ID attribute and here this option we want to render aid based on a list based on an array of items so let's go to our app dot component I'm gonna delete all the code here and declare an array of colors like this each color is an object with two properties ID and name so we've got red and then green and blue and of course that's change these IDs beautiful so I can a template here we're gonna apply the ng4 directive to repeat these options so let color of colors now for the value I'm going to use the property binding syntax and bind this to color that ID and here we can render the label so color the name so this is our native html5 drop-down list back in the browser we get this ugly really traditional looking drop-down list we can do better so let's convert this to an angular material drop-down list back here all we have to do is to prefix these elements with MD - so I put the cursor here command + D on mac or control-d on windows to trigger multi cursor editing so come on addy the first select is selected one more time now both select elements are selected so we type MD - select and press escape now one more time this time I'm gonna rename option so command on D one more time and then type md - option save back in the browser and now we have these modern drop-down lists that's much better now if you want to pre select one of the items here you need to use the ng model directive so back here I'm going to apply ng model directive on our MD select element entry model and bind this to let's say a field called color like an app that component I'm gonna define this color field here and set it to two so I want green to be selected by default now if you go back in the browser we're going to see an error so we have a blank screen let's take a look at the console alright can't bind to ng model since it is an unknown property of MD select you have seen this error earlier in the course the reason for this is because ng-model directive is defined in the forms module and because this is a brand-new angular project we have not imported the forms module so back in app module in the imports array I'm gonna add forms module save and back in the browser all right now you can see green is selected by default so to convert a native html5 drop-down list so an angular material one all we have to do is to prefix these elements with MD dash in this lecture I'm gonna show you how to work with angular material input controls so I can angular material website and the components page let's go to form controls and then input just like always first we start with the API tab to find the module so this component is defined in MD input module now back in our app module in the imports array I'm gonna import MD input module and then import this with my auto import plug-in okay now back in the documentation let's go to the overview tab I look at a sample example so this is how the input controls of angular material look like instead of having to label before an input field we have a placeholder that is currently on top of the input field so if I delete sushi here look the placeholder is now bigger and more visible and when we click it it kind of jumps to the top so this is a very nice modern effect that you have probably seen and a lot of applications out there now let's take a look at the markup so here we have a new element that is MD input container and inside this element we have a native html5 input element now this input element has a directive that is MD input now you might ask why we need a container here the reason for this is because in angular material we have a few other elements here for example we can have a hint below each input field we can have a prefix suffix we can have error messages so we put all these inside a container so how can we ask oh let's go to our app component at HTML I'm gonna delete all this and start with MD input container here it is an input of type text and you should decorate this with Md input directive we should also give it a placeholder so a placeholder let's say username well back in the browser so this is what we get okay now let's take this to the next level we can have a hint below this input field so we have a new element that is MD hint and here we can say something like type a unique username back in the browser and this is our hint okay we can also add a suffix here for example as a day his span and here we can have something like at domain.com so imagine in this form the user is going to select a username and this username combined with at domain.com is gonna make up their email address now here we can apply a directive and this span that is MD suffix let's take a look so here's our suffix we can add wash that hamid ani at domain.com we can also have a prefix so i'm gonna duplicate this line and change md suffix to md prefix and here we can have something like admin dot now back in the browser so we have admin dot marsh - hamid ani at domain.com so this suffix is always there we cannot delete it okay and we can also add error messages here so let's make this input field required and then here I'm gonna add another element that is MD - error previously in a section about template driven forms we used a div with a couple of bootstrap classes to render an error we used alert and alert - danger but here when using angular material we use MD - error and by the way make sure not to use bootstrap classes here for example earlier when we built our forums we always added this form - control class to our input fields you should not add this here because this will mess up with the appearance of your angular material components ok so you should either use bootstrap or angular material when you're building a form so let's delete this so I added this required attribute to our input field here and here inside MD - error element I'm going to add an error message the user name field is required now let's see what happens so back in the browser note this asterisk here this indicates that this field is required I'm going to click it the asterisk turns red however when I tab away we don't see the error message because we have not applied the ngmodel directive on this input field so there is no form control to keep track of the validity of this input field under the hood so here's our input field I'm gonna apply the ng model directive and also as a requirement we should give each input field a name this is when we are building template driven forms remember that so let's call this user name now with these angular is going to create a form control object and associated with this input field and this form control will keep track of the validity of this input field so let's see this in action I put the focus here and then tab away and here's our error message beautiful so this is how we work with input fields in angular material we can give our input fields a hint a suffix and prefix one or more error messages and by the way here we want to render this error message only if the field has an error so technically should have something like ng if we set this to first we need to declare a template variable so let's call this username and send it to ng model now with this variable we can see if our input field as an error or not so ng if username dot invalid and user name dot errors dot required and with this we can have multiple errors of different kind exactly the same way we implemented error handling in the template driven form section the only difference is in the marker so instead of using divs with bootstrap classes you're using angular material elements okay so this is all about input fields hi thank you for watching my angular tutorial if you enjoyed this video please like it and share it with others also you can subscribe to my channel for free new videos every week this video is part of my complete angular course with almost 30 hours of high quality content where you learn everything about angular from the basic to the advanced topics all in one course so you don't have to jump from one tutorial to another in case you're interested you can get this course with a big discount using the link in the video description and if not that's perfectly fine continue watching as the next section is coming up

Channel: Programming with Mosh

Views: 218,280

Rating: 4.9396038 out of 5

Keywords: angular, angular.js, angularjs, angular2, angular 2, angular4, angular 4, angular material, angular material design, code with mosh, programming with mosh, angular material tutorial, angular 2 material, angular material 2, angular 4 material

Id: wPT3K3w6JtU

Length: 36min 19sec (2179 seconds)

Published: Wed Sep 06 2017