Coding

Learn Angular Material – Full Tutorial

  • 00:00:00 hey guys my name is vishwas and welcome
  • 00:00:03 to a brand new tutorial series on
  • 00:00:05 angular material in this introductory
  • 00:00:08 video let's take a look at what is
  • 00:00:10 angular material the prerequisites for
  • 00:00:13 this course and also the course
  • 00:00:15 structure alright let's begin what is
  • 00:00:19 angular material angular material is a
  • 00:00:22 UI component library what that means is
  • 00:00:26 angular material provides us with
  • 00:00:29 components to build awesome user
  • 00:00:31 interfaces in QuickTime it is also an
  • 00:00:35 implementation of Google's material
  • 00:00:37 design specification just like how we
  • 00:00:41 have material UI for react beautify for
  • 00:00:45 view we have angular material for
  • 00:00:48 angular the goal here is to learn how to
  • 00:00:51 use the library components to build
  • 00:00:53 clean and elegant UI now before we get
  • 00:00:57 started let me quickly run you through
  • 00:00:59 the prerequisites as always HTML CSS and
  • 00:01:04 JavaScript go without saying in addition
  • 00:01:07 to these you also need to have a
  • 00:01:09 knowledge of angular you don't have to
  • 00:01:12 be an expert by any means but some basic
  • 00:01:15 knowledge is absolutely necessary if you
  • 00:01:19 are feeling rusty make sure to go
  • 00:01:21 through the angular tutorials on my
  • 00:01:22 channel before starting this course now
  • 00:01:26 as of this recording the current major
  • 00:01:28 version of angular and angular material
  • 00:01:30 is seven with new releases there might
  • 00:01:34 be minor tweaks but what you will learn
  • 00:01:37 in this series will still hold good so
  • 00:01:39 you can watch this entire series without
  • 00:01:42 any hesitation alright how are we going
  • 00:01:46 to proceed with this course first we
  • 00:01:49 will learn how to add angular material
  • 00:01:51 to an angular application then we will
  • 00:01:55 discuss about typography
  • 00:01:56 in angular after that we will take a
  • 00:01:59 look at the different components that
  • 00:02:02 make up the library the components fall
  • 00:02:05 under six major categories we have
  • 00:02:08 buttons and indicators navigation layout
  • 00:02:12 from controls
  • 00:02:14 pop-ups and models and finally data
  • 00:02:16 tables we will not take a detailed look
  • 00:02:19 at every single one of them but we will
  • 00:02:22 cover the important ones by the end of
  • 00:02:25 this course you will have a good
  • 00:02:26 understanding of how the individual
  • 00:02:29 angular material components work you can
  • 00:02:32 then use that knowledge to build angular
  • 00:02:34 applications that suit your requirement
  • 00:02:37 all right then let's get started in the
  • 00:02:39 next video
  • 00:02:45 in this video let's see how we can add
  • 00:02:48 angular material to an angular
  • 00:02:50 application now before I show you how to
  • 00:02:53 do that I want to tell you that for this
  • 00:02:56 course we will be closely looking at the
  • 00:02:59 documentation and that is for two
  • 00:03:02 reasons first one is to stay updated
  • 00:03:05 with the changes there will be future
  • 00:03:08 releases of angular material and it is
  • 00:03:10 safe to rely on the documentation as it
  • 00:03:13 is constantly updated the second reason
  • 00:03:16 is to know the directives that have to
  • 00:03:19 be used for the different components
  • 00:03:21 when we start writing code we need to
  • 00:03:24 import certain components and it is next
  • 00:03:27 to impossible to know the component
  • 00:03:29 names without referring to the
  • 00:03:31 documentation so make sure you have a
  • 00:03:34 tab open for the dogs while you are
  • 00:03:36 following the videos alright with that
  • 00:03:39 let's see how to add angular material to
  • 00:03:42 an angular application from the navbar I
  • 00:03:46 am going to navigate to the guides
  • 00:03:48 section of the documentation here you
  • 00:03:52 can see the getting started heading as
  • 00:03:54 well as the schematics heading both
  • 00:03:57 these sections contain information on
  • 00:03:59 how to install angular material
  • 00:04:01 depending on the version of your angular
  • 00:04:04 application the getting started section
  • 00:04:07 contains about six different steps which
  • 00:04:10 you have to go through to set up
  • 00:04:12 material in your angular application and
  • 00:04:15 this is only if your project is below
  • 00:04:18 version six for this series we will be
  • 00:04:22 working with angular version seven so I
  • 00:04:25 will demo how to add material with CLI
  • 00:04:28 schematics which is valid for angular
  • 00:04:31 version 6 and above now in the terminal
  • 00:04:36 when I run the command ng – – version
  • 00:04:40 you can see that I have angular CLI
  • 00:04:43 version seven if you are at a lower
  • 00:04:46 version please make sure to update it
  • 00:04:49 before creating a new project alright
  • 00:04:52 now what I have done is created a brand
  • 00:04:55 new project using the command
  • 00:04:58 engi new material – demo material – demo
  • 00:05:03 is the name of the project we will be
  • 00:05:05 working with and of course I have opened
  • 00:05:08 the project folder in vias code next to
  • 00:05:12 setup angular material
  • 00:05:14 make sure you navigate into the project
  • 00:05:16 folder and run the command ng had at
  • 00:05:21 angular slash material when we run the
  • 00:05:26 command it is going to ask us an option
  • 00:05:28 for the team I'm going to stick with
  • 00:05:31 indigo pink next it checks with us for
  • 00:05:34 hammer jeaious for gesture recognition I
  • 00:05:37 will simply go with yes for now next
  • 00:05:41 browser animations again yes
  • 00:05:46 and that is pretty much all you have to
  • 00:05:48 do you are ready to start using angular
  • 00:05:51 material in your application and this
  • 00:05:55 was possible because angular material is
  • 00:05:57 packaged with CLI schematics what that
  • 00:06:02 means is that the angular team provided
  • 00:06:04 us with a single command that will
  • 00:06:06 handle setting up material in your
  • 00:06:09 application let's take a look at the
  • 00:06:12 differences to see what changes were
  • 00:06:14 made by running the command first up
  • 00:06:18 angular dot JSON the only difference is
  • 00:06:22 the inclusion of a CSS file in the
  • 00:06:25 Styles array and this is the indigo pink
  • 00:06:28 theme which we opted for the next file
  • 00:06:32 is package dot JSON here you can see
  • 00:06:36 that angular cdk and angular material
  • 00:06:38 have been added to the list of
  • 00:06:41 dependencies next we also have updates
  • 00:06:45 to the package lock dot JSON file and
  • 00:06:49 then we have index dot HTML here two
  • 00:06:53 references have been added one to
  • 00:06:56 material icons and the other to Roboto
  • 00:06:59 font
  • 00:07:01 in mindo TS there is the inclusion of
  • 00:07:04 ham urges in style.css there is some CSS
  • 00:07:09 reset that has been added to the body
  • 00:07:12 tag
  • 00:07:13 finally in AB dot module OTS we are
  • 00:07:17 importing the browser animations module
  • 00:07:19 and adding it to the imports array now
  • 00:07:23 if you're doing this manually make sure
  • 00:07:24 to add it after the browser's module so
  • 00:07:29 the command basically adds project
  • 00:07:31 dependencies includes them in the module
  • 00:07:33 and sets up the style and theme for your
  • 00:07:36 angular application to test if it is
  • 00:07:40 actually working let's use materials
  • 00:07:43 button component there are three simple
  • 00:07:46 steps first step imported in app dot
  • 00:07:50 module dot TS import math button module
  • 00:07:57 from angular slash material second step
  • 00:08:04 add it to the imports array third step
  • 00:08:08 use it in the HTML so in AB dot
  • 00:08:11 component dot HTML wipe out the existing
  • 00:08:14 HTML and add a button tag with the text
  • 00:08:21 hello world but also with the directive
  • 00:08:26 mat – button now let's run the
  • 00:08:30 application in the terminal run the
  • 00:08:33 command ng serve – OH
  • 00:08:41 in the browser you can see that we have
  • 00:08:43 a button that says hello world which is
  • 00:08:46 styled with angular material let me
  • 00:08:50 change the directive to mat raised
  • 00:08:53 button
  • 00:08:56 go back to the browser and you can see
  • 00:09:00 the subtle difference the button is now
  • 00:09:02 raised so the material library is
  • 00:09:06 working perfectly fine you're probably
  • 00:09:09 thinking how would I know to use math
  • 00:09:12 button or math raised button right well
  • 00:09:17 it's pretty simple I refer to the
  • 00:09:18 documentation I can mention it is kind
  • 00:09:21 of a necessity for this particular
  • 00:09:23 course there is just no way that we can
  • 00:09:27 know what directive has to be used for
  • 00:09:29 which component this was a simple
  • 00:09:33 getting started video and that is the
  • 00:09:35 reason I used a simple button component
  • 00:09:37 without referring to the documentation
  • 00:09:40 in the upcoming videos we will be
  • 00:09:43 referring the documentation more often
  • 00:09:46 all right there you go
  • 00:09:48 angular material working in your angular
  • 00:09:50 application what we had to do was run
  • 00:09:54 the command in G and at angular slash
  • 00:09:57 material in the CLI project
  • 00:10:04 in the last video we saw how to add a
  • 00:10:07 material button component to our
  • 00:10:10 application there were three simple
  • 00:10:13 steps first step is to import it second
  • 00:10:17 step is to add it to the imports array
  • 00:10:20 and third step is to use it in the HTML
  • 00:10:24 although this is perfectly fine there is
  • 00:10:28 a better recommended approach and that
  • 00:10:31 approach is to create a separate module
  • 00:10:34 that deals with importing and exporting
  • 00:10:36 material components so in the terminal
  • 00:10:40 that is used the CLI to generate a new
  • 00:10:44 module ng G for generate m4 module for
  • 00:10:49 the by name of the module which we will
  • 00:10:51 call as material
  • 00:10:55 once the command completes you should
  • 00:10:58 have a folder called material inside the
  • 00:11:01 app folder and within the material
  • 00:11:03 folder you should have material dot
  • 00:11:06 module dot TS in this module we are only
  • 00:11:10 concerned with importing and exporting
  • 00:11:13 material components so remove common
  • 00:11:16 module
  • 00:11:19 as well as the declarations array
  • 00:11:23 instead add an exports array
  • 00:11:30 now let's move the imports from app
  • 00:11:33 module to material module so from AB dot
  • 00:11:36 module dot es remove the import
  • 00:11:40 statement and add it in material module
  • 00:11:43 make sure to remove it from the imports
  • 00:11:46 array as well next in material module
  • 00:11:49 create a constant
  • 00:11:53 material components and then include the
  • 00:11:57 map button module next add this constant
  • 00:12:01 to the imports array and the exports
  • 00:12:04 array
  • 00:12:05 finally include the material module in
  • 00:12:08 the app module in the imports are a
  • 00:12:11 material module which is going to auto
  • 00:12:15 import the material module from material
  • 00:12:18 dot module dot TS now let's restart the
  • 00:12:22 server ctrl C and then ng serve – OH
  • 00:12:32 and you can see that the raised button
  • 00:12:34 still has the same material styling so
  • 00:12:39 what we have done is extracted material
  • 00:12:41 into its own module so from the next
  • 00:12:44 video to use any component all we have
  • 00:12:47 to do is import it and add it to the
  • 00:12:50 material components array this approach
  • 00:12:53 isolates material code and also keeps
  • 00:12:56 the app module nice and clean
  • 00:13:03 in this video let's discuss about
  • 00:13:06 typography in angular material now
  • 00:13:10 typography basically deals with the
  • 00:13:12 style and appearance of text on your
  • 00:13:15 website if your website has text content
  • 00:13:19 with way too many styles or font sizes
  • 00:13:22 it kind of spoils the UI to address this
  • 00:13:26 concern angular material provides
  • 00:13:29 typography levels each level has a
  • 00:13:33 definite font size font weight and line
  • 00:13:37 height let's take a closer look at the
  • 00:13:40 different type a graffiti belts to
  • 00:13:43 create huge headers in the web page we
  • 00:13:46 can make use of the material display
  • 00:13:48 classes now there are a total of four
  • 00:13:52 display classes so let me create four
  • 00:13:55 div tags one for each display class in
  • 00:13:58 fact that we simply copy paste the code
  • 00:14:01 and then explain it so we have four dip
  • 00:14:04 tags each with a different class the
  • 00:14:07 topmost one is matte display for my
  • 00:14:11 display three two and one if we save
  • 00:14:14 this and take a look at the browser you
  • 00:14:17 can see how they appear on the web page
  • 00:14:19 display four has the largest size and
  • 00:14:23 the size decreases as we move towards
  • 00:14:25 display one when you have to really
  • 00:14:28 capture the users attention this is
  • 00:14:31 probably the way to go next we have four
  • 00:14:35 more classes that correspond to each one
  • 00:14:38 H 2 H 3 and H word tags for a section of
  • 00:14:42 your web page again let me copy pasted
  • 00:14:46 for more div tags we have the mat
  • 00:14:50 headline class which is for an h1 tag
  • 00:14:53 mat title which is equivalent to an h2
  • 00:14:56 tag subheading 2 for h3 and subheading 1
  • 00:15:01 for H 4 if you save the file and take a
  • 00:15:05 look at the browser you can see the four
  • 00:15:08 classes in action so these are also kind
  • 00:15:12 of headings but smaller compared to the
  • 00:15:15 display classes
  • 00:15:16 the display classes you probably use
  • 00:15:19 only once at the very top of your page
  • 00:15:21 and the section headings like headline
  • 00:15:25 can be used multiple times once for each
  • 00:15:28 section alright next we have body text
  • 00:15:33 and caption again let me copy paste the
  • 00:15:37 div tags so for the body content in your
  • 00:15:40 page that is for text other than
  • 00:15:43 headings you can make use of body 1 and
  • 00:15:46 if you need the text to be in bold use
  • 00:15:50 body 2 and if there is a caption use the
  • 00:15:54 caption class so Matt body 1 Matt body 2
  • 00:15:59 and Matt caption if you take a look at
  • 00:16:02 the browser you can see them in action
  • 00:16:05 body one body two which is bold text and
  • 00:16:09 then the caption and the final class we
  • 00:16:14 have is the typography class itself and
  • 00:16:18 what it does is it allows h1 to h4 tags
  • 00:16:22 to be used as you would normally
  • 00:16:24 you just have to wrap them in material
  • 00:16:27 typography class again let me quickly
  • 00:16:30 copy paste the div tags so you can see
  • 00:16:33 that we have a div tag with class matte
  • 00:16:36 typography and then within this div tag
  • 00:16:39 we can use the regular h1 to h4 tags if
  • 00:16:43 we save this and take a look at the
  • 00:16:45 browser you can see that it is exactly
  • 00:16:48 the same as headline title and
  • 00:16:50 subheading classes so this is about
  • 00:16:55 typography in angular material a set of
  • 00:16:59 classes concerned with the style and
  • 00:17:02 appearance of text in your application
  • 00:17:04 in the next video let's discuss about
  • 00:17:07 one of the most fundamental HTML
  • 00:17:10 elements which is the button element
  • 00:17:12 thank you guys for watching over to
  • 00:17:14 subscribe I'll see you guys in the next
  • 00:17:16 one
  • 00:17:21 in this video let's take a look at
  • 00:17:24 angular material buttons angular
  • 00:17:27 material buttons are basically native
  • 00:17:30 button tags or anchor tags enhanced with
  • 00:17:33 material design we had a quick look at
  • 00:17:37 material buttons in the getting started
  • 00:17:39 video now let's take a more detailed
  • 00:17:42 look to make use of material buttons we
  • 00:17:47 need to import the material button
  • 00:17:49 module so in material dot module dot TS
  • 00:17:53 import the mat button module and added
  • 00:17:57 to the material components array now
  • 00:18:00 let's go back to app component dot HTML
  • 00:18:04 to create the simplest of material
  • 00:18:07 buttons we add the mat button attribute
  • 00:18:11 so a button tag with the math button
  • 00:18:16 attribute save this and take a look at
  • 00:18:19 the browser and you can see a material
  • 00:18:21 button now let's take a look at some of
  • 00:18:25 the variants
  • 00:18:29 the first variant is a raised button the
  • 00:18:33 attribute is mat raised button
  • 00:18:38 the mix variant is a flat button the
  • 00:18:41 attribute is mat flat button
  • 00:18:47 and we also have a variant that applies
  • 00:18:50 just the outline the attribute is Matt
  • 00:18:53 strobe button
  • 00:18:56 let's save this and take a look at the
  • 00:18:59 browser the buttons are too close to
  • 00:19:02 each other so let's add some margin in
  • 00:19:04 AB dot component dot CSS
  • 00:19:12 margin-right three ram now if you go
  • 00:19:16 back to the browser you can see the
  • 00:19:19 different buttons raised flat and strode
  • 00:19:27 apart from these we also have circular
  • 00:19:30 buttons in angular material there are
  • 00:19:33 again three variants the first one is an
  • 00:19:37 icon button the attribute is mat icon
  • 00:19:41 button
  • 00:19:45 the second variant is a fab button the
  • 00:19:48 attribute is mat fab
  • 00:19:53 lastly a mini fire button with the
  • 00:19:56 attribute mat mini fab
  • 00:20:01 save the file and let's take a look at
  • 00:20:04 them in the browser so we have icon
  • 00:20:07 button which is a circular button with a
  • 00:20:10 transparent background fab button which
  • 00:20:13 is a circular button which defaults to
  • 00:20:16 accent color of your theme and the mini
  • 00:20:19 fab button which is just a smaller
  • 00:20:22 version of the fab button so these are
  • 00:20:25 the variants for circular buttons next
  • 00:20:30 let's talk about button colors when it
  • 00:20:33 comes to material there are three colors
  • 00:20:36 we talked about primary accent and
  • 00:20:40 warned colors w AR n warned to apply the
  • 00:20:45 color we make use of the color attribute
  • 00:20:48 on the button element let me copy paste
  • 00:20:52 three buttons and add the colors
  • 00:20:57 color is equal to primary
  • 00:21:02 the text is primary color is equal to
  • 00:21:07 accent
  • 00:21:10 the text is accent and finally color is
  • 00:21:15 equal to war and the text is war
  • 00:21:20 if you take a look at the browser you
  • 00:21:23 can see the button text in different
  • 00:21:25 colors primary accent and warm how the
  • 00:21:31 colors apply are based on the variant of
  • 00:21:34 the button if we were to apply the same
  • 00:21:37 colors to raised buttons for example
  • 00:21:50 you can see the difference
  • 00:21:52 primary accent and worn so based on the
  • 00:21:56 type of the button the color is added to
  • 00:21:58 the element the last thing I want to
  • 00:22:01 show is how to disable the ripple effect
  • 00:22:04 right now you can see that when I click
  • 00:22:06 on the button there is a ripple
  • 00:22:09 animation effect if you don't like it
  • 00:22:12 for some reason you can add the disable
  • 00:22:15 ripple attribute to the button element
  • 00:22:17 so on this third button which is for
  • 00:22:20 warm I am going to add
  • 00:22:24 disable Ripple if I save this and go
  • 00:22:28 back to the browser only on this button
  • 00:22:31 when I click you can see that there is
  • 00:22:34 no more ripple effect ripple effect no
  • 00:22:38 ripple effect now those were a lot of
  • 00:22:41 attributes to keep in mind so let me
  • 00:22:44 point you to the documentation go to
  • 00:22:46 material dot io and click on components
  • 00:22:50 and then scroll to the button component
  • 00:22:53 click on examples and click on the code
  • 00:22:58 icon here you pretty much have all the
  • 00:23:02 code required for you to experiment with
  • 00:23:04 material buttons and if you visit the
  • 00:23:08 API tab you can see what is the module
  • 00:23:11 that needs to be imported so angular
  • 00:23:15 material provides six variants and three
  • 00:23:18 colors that can be applied to the native
  • 00:23:21 button element buttons kind of make up a
  • 00:23:24 part of few other material elements so
  • 00:23:28 make sure you have a good knowledge of
  • 00:23:29 them with this understanding let's take
  • 00:23:32 a look at button toggle in the next
  • 00:23:34 video
  • 00:23:39 alright guess let's take a look at the
  • 00:23:42 button toggle element in this video
  • 00:23:45 button toggle is basically an element
  • 00:23:48 with the appearance of a button and can
  • 00:23:51 toggle between on and off states to get
  • 00:23:55 started we need to import Matt button
  • 00:23:58 toggle module from angular material and
  • 00:24:01 add it to the material array
  • 00:24:06 import it and add it to the material
  • 00:24:10 components array now in the HTML we can
  • 00:24:14 add Matt button toggle with the text
  • 00:24:18 toggle if you save the file and take a
  • 00:24:22 look at the browser you should see a
  • 00:24:24 toggle button click on the button a
  • 00:24:27 toggle say the on state click again and
  • 00:24:29 it toggles to the off state now you
  • 00:24:33 might want to use the state of the
  • 00:24:35 toggle button to perform some operation
  • 00:24:38 to get hold of the toggle state add a
  • 00:24:41 template reference variable and then
  • 00:24:43 access the checked properly on that
  • 00:24:46 variable
  • 00:24:49 toggle button is going to be the
  • 00:24:51 template reference variable and then
  • 00:24:54 interpolate toggle button dot checked if
  • 00:24:58 you now take a look at the browser you
  • 00:25:01 can see that the value is false click on
  • 00:25:04 the button and the value is true now the
  • 00:25:08 button checked value is false by default
  • 00:25:12 we can change that though by adding the
  • 00:25:15 checked attribute to the toggle button
  • 00:25:17 element
  • 00:25:19 if you now take a look at the browser
  • 00:25:21 you can see that the button appearance
  • 00:25:24 is that of the on state and the checked
  • 00:25:27 property value is now true we of course
  • 00:25:32 still have the ripple effect when we
  • 00:25:34 click on the button to disable it add
  • 00:25:37 the disable ripple attribute
  • 00:25:44 you can see that the ripple animation is
  • 00:25:46 now gone it is also possible to disable
  • 00:25:50 the button itself by adding the disabled
  • 00:25:53 attribute
  • 00:25:57 if I now head back to the browser and
  • 00:25:59 try clicking on the button nothing
  • 00:26:02 happens the button is disabled and
  • 00:26:05 cannot be toggled between on and off
  • 00:26:08 alright these are some of the properties
  • 00:26:11 on a button toggle element now although
  • 00:26:15 these elements can be used individually
  • 00:26:16 they are typically grouped together and
  • 00:26:19 presented as better alternatives to
  • 00:26:23 radio buttons or checkboxes for example
  • 00:26:28 let's say you have a list of front-end
  • 00:26:31 technologies let me show you how to
  • 00:26:33 display them using the button toggle
  • 00:26:36 element to create a group of button
  • 00:26:39 toggle elements we use the Matt button
  • 00:26:42 toggle group directive
  • 00:26:46 within the group we can add the
  • 00:26:48 individual button toggle elements
  • 00:26:53 angular
  • 00:26:56 react and view each of the elements need
  • 00:27:01 to have a value attribute which will
  • 00:27:03 point to the overall value of this group
  • 00:27:15 so value is equal to angular react and
  • 00:27:19 view now to access this group's value we
  • 00:27:23 need to create a template reference
  • 00:27:25 variable and assign Matt button toggle
  • 00:27:28 group
  • 00:27:31 the variable name is toggle group and to
  • 00:27:34 this we assigned Matt button toggle
  • 00:27:37 group now we can interpolate toggle
  • 00:27:41 group dot value
  • 00:27:45 to access the value of this toggle
  • 00:27:48 button group let's save this and head to
  • 00:27:51 the browser and you can see that we have
  • 00:27:53 the button group I click on the button
  • 00:27:56 and the group value is displayed angular
  • 00:28:00 react and view by default the toggle
  • 00:28:05 group behaves like radio buttons and
  • 00:28:07 only one item can be selected at a time
  • 00:28:10 if you want the behavior to be that of a
  • 00:28:14 checkbox where multiple items can be
  • 00:28:16 selected you simply need to add the
  • 00:28:19 multiple attribute to the toggle group
  • 00:28:21 element so over here I'm going to add
  • 00:28:25 multiple if you now go back to the
  • 00:28:28 browser you can see that we can select
  • 00:28:31 multiple elements and the value is now a
  • 00:28:34 comma separated list of the selections
  • 00:28:38 angular react view just angular and
  • 00:28:41 react just angular or all three
  • 00:28:45 now what we have seen is how to get hold
  • 00:28:48 of the value in the HTML you can also
  • 00:28:51 listen to change events and execute some
  • 00:28:54 code written in the component class as
  • 00:28:57 well you can also get hold of the
  • 00:29:00 template reference variable in the class
  • 00:29:02 component and perform any required
  • 00:29:04 operation I do have a small series on
  • 00:29:08 angular component interaction where I go
  • 00:29:11 in detail about using reference
  • 00:29:13 variables within the component class so
  • 00:29:16 please do take a look at that if you
  • 00:29:18 have a necessity but this is pretty much
  • 00:29:22 how you work with the button toggle
  • 00:29:24 element in angular material
  • 00:29:31 in this video let's take a look at the
  • 00:29:33 simplest way to use angular material
  • 00:29:36 icons first make sure you have a link to
  • 00:29:40 material icons in your index dot HTML
  • 00:29:44 this right here next import the mat icon
  • 00:29:50 module from angular material and add it
  • 00:29:53 to the material components array
  • 00:29:56 by including Matt icon module we can now
  • 00:30:00 use the Matt icon component so in the
  • 00:30:03 HTML
  • 00:30:05 Matt icon in between the opening and
  • 00:30:09 closing tags we need to specify text
  • 00:30:12 that corresponds to an icon but the
  • 00:30:16 question is what text do we specify the
  • 00:30:20 map icon component accepts material icon
  • 00:30:23 fonts so in the browser go to material
  • 00:30:27 dot io / tools slash icons and here you
  • 00:30:31 can see all the material fonts available
  • 00:30:34 you simply grab the text from one of the
  • 00:30:37 icons and paste it as the inner HTML to
  • 00:30:41 the matte icon tag if you now go back to
  • 00:30:44 the browser you should see the icon
  • 00:30:47 being displayed so you can select any
  • 00:30:50 icon from the list and just include the
  • 00:30:53 text in the matte icon component to add
  • 00:30:56 a color we use the color attribute with
  • 00:30:59 either primary accent or born as a value
  • 00:31:03 which is retrieved
  • 00:31:05 based on your theme so if I add color is
  • 00:31:09 equal to primary go back to the browser
  • 00:31:14 you should see the icon with the primary
  • 00:31:16 color which in our case is indigo now
  • 00:31:22 you can also use your own SVG's and
  • 00:31:24 there is a detailed explanation on how
  • 00:31:26 to use them as well so if you go to the
  • 00:31:29 material dogs components under buttons
  • 00:31:33 and indicators there is icon and over
  • 00:31:37 here there is a good amount of
  • 00:31:40 explanation on using SVG's but then
  • 00:31:44 again material font has tons of icons
  • 00:31:47 which might be more than enough
  • 00:31:54 let's take a look at material batches in
  • 00:31:57 this video if you work with bootstrap
  • 00:32:00 badges should seem familiar to you they
  • 00:32:04 are basically small status descriptors
  • 00:32:06 for UI elements for example if you have
  • 00:32:10 to display notifications for a user or
  • 00:32:13 the number of unread messages in your
  • 00:32:15 inbox badges are the way to go so let's
  • 00:32:19 see what is possible with angular
  • 00:32:21 material badges in this video
  • 00:32:24 to be able to use them we first need to
  • 00:32:27 import the badge module in material dot
  • 00:32:31 module ts import mat badge module from
  • 00:32:37 angular slash material slash badge and
  • 00:32:41 then add it to the material components
  • 00:32:44 array
  • 00:32:45 now let's create our first badge in AB
  • 00:32:49 component dot HTML I'm going to include
  • 00:32:53 a span tag with the text notifications
  • 00:32:57 to add a badge to the span tag we make
  • 00:33:01 use of the mat badge attribute
  • 00:33:06 so mad badge and this attribute is equal
  • 00:33:10 to the value you want to indicate let's
  • 00:33:13 go with five if we save this and take a
  • 00:33:17 look at the browser you should see the
  • 00:33:19 badge in action the small circular
  • 00:33:22 element on the top right of the span
  • 00:33:24 text now this is the most basic badge
  • 00:33:28 you can have let's see how to customize
  • 00:33:31 this and let's start with the position
  • 00:33:35 by default a badge is placed above and
  • 00:33:39 after the element it is associated with
  • 00:33:42 that is to the top right we can control
  • 00:33:46 the position using the Matt badge
  • 00:33:49 position attribute so back in the HTML
  • 00:33:52 I'm going to make three more copies of
  • 00:33:55 this div tag
  • 00:34:01 and I'm going to specify the Matt badge
  • 00:34:03 position attribute
  • 00:34:11 below and before
  • 00:34:15 below and after
  • 00:34:20 above and before let me also add some
  • 00:34:24 margin to the div tags to make sure that
  • 00:34:26 there is enough spacing between the
  • 00:34:28 elements so div margin 3 REMS now if you
  • 00:34:36 save the files and take a look at the
  • 00:34:37 browser you can see the different
  • 00:34:40 positions above and after below and
  • 00:34:44 before below and after above and before
  • 00:34:50 some at badge position attribute to
  • 00:34:53 control the position of the badge next
  • 00:34:57 let's talk about badge sizing we can
  • 00:35:00 specify the size using the Matt badge
  • 00:35:03 size attribute the possible values are
  • 00:35:07 small medium and large with medium being
  • 00:35:11 the default value I'm going to make
  • 00:35:14 three more copies of our notification
  • 00:35:16 badge and for the first one I'm going to
  • 00:35:20 add Mac badge size is equal to small the
  • 00:35:26 second one medium which is also the
  • 00:35:28 default and for the third one large if
  • 00:35:33 we now save the file and take a look at
  • 00:35:35 the browser you can see the badges which
  • 00:35:38 are small medium and large
  • 00:35:41 alright next we have badge coloring the
  • 00:35:45 badge background color can be set using
  • 00:35:48 the mat badge color attribute possible
  • 00:35:52 values our primary accent and born with
  • 00:35:56 primary being the default value the
  • 00:36:00 color of course is determined by the
  • 00:36:01 theme your application is using so back
  • 00:36:05 in vs code I'm going to make three more
  • 00:36:07 copies of the original notification
  • 00:36:10 badge
  • 00:36:14 for the first one I'm going to add math
  • 00:36:17 badge color is equal to primary which is
  • 00:36:21 the default for the second one it is
  • 00:36:24 going to be accent and for the third one
  • 00:36:26 it's going to be warned if we save this
  • 00:36:30 and take a look at the browser you can
  • 00:36:32 see primary accent and worn colors based
  • 00:36:36 on your theme
  • 00:36:38 now you might have noticed in all the
  • 00:36:40 notification badges the badge overlaps
  • 00:36:44 with the text the overlap lag though can
  • 00:36:47 be controlled as well we specify the
  • 00:36:50 Matt patch overlap attribute and set it
  • 00:36:53 defaults back in vs code on the last
  • 00:36:56 badge I'm going to add the attribute
  • 00:37:00 Matt batch overlap is equal to false if
  • 00:37:05 you go back to the browser you can see
  • 00:37:08 that the batch doesn't overlap with the
  • 00:37:10 text anymore
  • 00:37:11 in fact material documentation advises
  • 00:37:15 us to overlap badges for icons and not
  • 00:37:19 for text for example if you have the
  • 00:37:22 inbox icon then overlapping might be a
  • 00:37:25 good choice for text however try
  • 00:37:28 avoiding overlap as much as possible
  • 00:37:32 finally let's talk about binding values
  • 00:37:35 and also conditional rendering the value
  • 00:37:38 for a batch is usually stored in a class
  • 00:37:41 property to bind the value we simply use
  • 00:37:44 property binding so I'm going to open
  • 00:37:47 app component es and over here I'm going
  • 00:37:52 to create a new property notifications
  • 00:37:56 is equal to two and then in the HTML on
  • 00:38:01 the very first badge I'm going to have
  • 00:38:04 property binding on the mat badge
  • 00:38:06 attribute so square brackets for
  • 00:38:10 property binding and the property we
  • 00:38:12 want to bind to is notifications
  • 00:38:17 this property right here so now if we go
  • 00:38:21 back to the browser
  • 00:38:22 the very first batch now indicates – now
  • 00:38:27 sometimes you might also want to
  • 00:38:28 conditionally render based on the number
  • 00:38:31 of notifications for example when
  • 00:38:33 notifications is zero it doesn't really
  • 00:38:37 make sense to indicate that we rather
  • 00:38:39 hide the badge itself we can do that
  • 00:38:43 using mad badge hidden attribute so back
  • 00:38:46 an app component I'm going to add the
  • 00:38:49 condition property binding with mat
  • 00:38:53 badge hidden
  • 00:38:56 and this is going to be equal to the
  • 00:38:59 condition notifications is equal to zero
  • 00:39:04 now if we take a look at the browser you
  • 00:39:09 can still see the badge to go back to vs
  • 00:39:13 code change the value to zero
  • 00:39:18 and you can see that the
  • 00:39:20 is now hidden that is how you
  • 00:39:23 conditionally render a badge in angular
  • 00:39:25 material using the mad badge hidden
  • 00:39:28 attribute alright that's pretty much
  • 00:39:31 what I have about badges
  • 00:39:34 let me quickly point you to the
  • 00:39:36 documentation so go to material dot io
  • 00:39:39 components under buttons and indicators
  • 00:39:43 there is badge and if you go to the API
  • 00:39:46 tab you will know what has to be
  • 00:39:49 imported
  • 00:39:55 let's take a look at the progress
  • 00:39:57 spinner in this video first let's import
  • 00:40:01 the module Matt progress spinner module
  • 00:40:05 included in the material components
  • 00:40:08 array of this module basically provides
  • 00:40:11 us with two spinner components Matt
  • 00:40:14 progress spinner and Matt spinner the
  • 00:40:18 first one Matt progress spinner is a
  • 00:40:21 determinate spinner which has a value
  • 00:40:24 attribute that can be between zero and
  • 00:40:26 hundred so Matt progress spinner with
  • 00:40:31 the value attribute is equal to let's go
  • 00:40:34 with 40 if you take a look at the
  • 00:40:37 browser you can see a spinner that is at
  • 00:40:40 40% value we can also specify the value
  • 00:40:45 as 0 in which case you cannot see any
  • 00:40:49 spinner at all and a value of 100 which
  • 00:40:55 shows the complete spinner you can also
  • 00:40:58 bind to the value attribute
  • 00:41:00 programmatically to indicate any
  • 00:41:03 progress that has to be conveyed to the
  • 00:41:06 user now a more common use case of the
  • 00:41:09 spinner is the indeterminate spinner or
  • 00:41:12 the spinner that never stops spinning
  • 00:41:15 for that we make use of the Matt spinner
  • 00:41:18 component
  • 00:41:21 if we now save the file and
  • 00:41:23 take a look at the browser you can see
  • 00:41:25 that we have a progress winner that
  • 00:41:27 spins indefinitely you would want to use
  • 00:41:31 this to indicate to the user that
  • 00:41:33 something is running in the background
  • 00:41:35 and the UI is busy for example if you
  • 00:41:39 are loading data it is a good idea to
  • 00:41:42 show the spinner and then hide it when
  • 00:41:44 the data has loaded
  • 00:41:46 let me mock the loading of data with a
  • 00:41:50 button click so I'm going to go back to
  • 00:41:52 AB dot component dirtiest and create a
  • 00:41:55 new property
  • 00:41:57 show spinner and initialize it to false
  • 00:42:00 I'm also going to define a method load
  • 00:42:04 data and in this method initially we are
  • 00:42:08 going to set show spinner to true this
  • 00:42:13 Dodger spinner is equal to true and then
  • 00:42:16 we use set timeout to set it back to
  • 00:42:20 false after five seconds
  • 00:42:25 so error function this dot shows spinner
  • 00:42:28 is equal defaults in the HTML let me use
  • 00:42:32 the ng if condition with show spinner
  • 00:42:35 and also create a button that calls the
  • 00:42:38 load data method
  • 00:42:41 and gif is equal to show spinner and a
  • 00:42:45 button load data
  • 00:42:47 on-click this is going to be load data
  • 00:42:51 now let's go back to the browser and
  • 00:42:55 initially you can see that the spinner
  • 00:42:57 is hidden I click on load data and the
  • 00:43:01 spinner appears this indicates to the
  • 00:43:03 user the data is being fetched and after
  • 00:43:06 five seconds the spinner disappears
  • 00:43:08 which again can indicate that the data
  • 00:43:11 has been loaded now ideally you want a
  • 00:43:14 separate component with more styling
  • 00:43:17 like an overlay and a z-index so that
  • 00:43:20 nothing else can be clicked when data is
  • 00:43:23 being loaded or even a form being
  • 00:43:26 submitted and also by default the color
  • 00:43:30 is set to primary color of the theme but
  • 00:43:33 again like other components you can set
  • 00:43:35 the color attribute to accent or warn as
  • 00:43:38 well so mad spinner color is equal to
  • 00:43:42 accent
  • 00:43:46 and now we have an accent color spinner
  • 00:43:49 so that is about the progress spinner
  • 00:43:51 now similar to the progress spinner
  • 00:43:54 there is also the progress bar indicator
  • 00:43:56 in angular material it works almost the
  • 00:44:00 same as progress spinner so I will leave
  • 00:44:02 it up to you guys to experiment and
  • 00:44:05 understand how it works well that is
  • 00:44:09 about buttons and indicators in angular
  • 00:44:12 material from the next video let's take
  • 00:44:15 a look at the different components
  • 00:44:17 related to navigation
  • 00:44:23 let's take a look at navigation
  • 00:44:25 components starting with the toolbar
  • 00:44:28 typically the toolbar displays
  • 00:44:30 information and actions relating to the
  • 00:44:33 current screen it's used for branding
  • 00:44:36 screen titles navigation and actions in
  • 00:44:40 this video though we will only focus on
  • 00:44:43 how the toolbar can be used as a navbar
  • 00:44:47 now the first step is to import the
  • 00:44:50 material toolbar module in material
  • 00:44:53 module dot TS in the import statement ad
  • 00:44:57 mat toolbar module also included in the
  • 00:45:02 material components array
  • 00:45:05 now that I think of it the re name is
  • 00:45:08 slightly misleading so I'm going to
  • 00:45:10 replace material components with the
  • 00:45:13 name just material
  • 00:45:17 all right now that we have imported the
  • 00:45:19 module we can use the component in the
  • 00:45:21 HTML so in AB component dot HTML the
  • 00:45:25 component is mat toolbar
  • 00:45:31 within the toolbar I'm going to add a
  • 00:45:33 span tag that says code evolution
  • 00:45:38 if you now save this and take a look at
  • 00:45:40 the browser you should be able to see a
  • 00:45:42 basic toolbar we can add the color to
  • 00:45:46 this toolbar using the color attribute
  • 00:45:48 the color attribute accepts either
  • 00:45:51 primary accent or worn as its value
  • 00:45:54 let's go with primary
  • 00:46:00 if you head back to the browser you
  • 00:46:03 should be able to see a primary color
  • 00:46:06 toolbar in your application now let's
  • 00:46:09 see how to convert this basic tool bar
  • 00:46:12 into a navbar anavar typically consists
  • 00:46:16 of the brand title on the left and a
  • 00:46:19 group of links on the right Mindi
  • 00:46:23 convert our span tag into a div tag
  • 00:46:27 which is going to be our brand code
  • 00:46:30 evolution I'm also going to add another
  • 00:46:33 div tag with a set of links I'm going to
  • 00:46:36 add three span tags one for home
  • 00:46:41 one for about and one for services if
  • 00:46:46 you save the file and take a look at the
  • 00:46:48 browser you can see that it doesn't
  • 00:46:50 exactly look like a navbar but all we
  • 00:46:53 need is to distribute the space in the
  • 00:46:56 toolbar in between the title and the
  • 00:46:58 links so in the CSS which is AB dot
  • 00:47:02 component dot CSS I'm going to add a
  • 00:47:05 class navbar
  • 00:47:08 and specify justify content to be space
  • 00:47:12 between let me also add some spacing
  • 00:47:16 between the span tags padding right one
  • 00:47:20 Ram finally add the nav bar class to the
  • 00:47:23 toolbar so in AB component dot HTML on
  • 00:47:27 the mat toolbar component class is equal
  • 00:47:30 to nav bar now if we take a look at the
  • 00:47:34 browser you should have a proper navbar
  • 00:47:37 brand on the left and a set of links on
  • 00:47:40 the right and the styling is completely
  • 00:47:43 up to you but a toolbar is what you need
  • 00:47:47 to use to create a nav bar in angular
  • 00:47:49 material
  • 00:47:54 in this video let's take a look at side
  • 00:47:57 nav and angular material the first step
  • 00:48:01 as always is to import the module say
  • 00:48:05 material module dot es import mat side
  • 00:48:09 nav module and add it to the material
  • 00:48:11 array now we can add the side nav to our
  • 00:48:16 application
  • 00:48:18 to set up a site now we use three
  • 00:48:21 components the first one is Matt site
  • 00:48:25 nap container which acts as a container
  • 00:48:29 to the site nav as well as the main
  • 00:48:32 content within the container we have mat
  • 00:48:36 side nav
  • 00:48:38 which represents the site content
  • 00:48:43 and then we have mapped site nap content
  • 00:48:47 which represents the main content it is
  • 00:48:52 important that the site content and the
  • 00:48:55 main content are placed within the
  • 00:48:57 container if you don't want some
  • 00:49:00 elements to be affected by this
  • 00:49:02 container for example header and footer
  • 00:49:05 you can place them outside the sitemap
  • 00:49:08 container all right if we now save the
  • 00:49:11 file and take a look at the browser the
  • 00:49:14 output is not quite what we expect
  • 00:49:18 we can see the main content for the site
  • 00:49:21 now is not seen let me tell you that
  • 00:49:24 this is the expected behavior site nav
  • 00:49:28 is always hidden by default there are a
  • 00:49:32 couple of ways to open or show the side
  • 00:49:35 nav the simplest way is to add the
  • 00:49:38 opened attribute on the mat side nav
  • 00:49:41 component
  • 00:49:44 if you now say the file and take a look
  • 00:49:46 at the browser you should be able to see
  • 00:49:49 the site now as well the UI though is
  • 00:49:52 not clear so let me add some basic
  • 00:49:55 styling back in vs code and AB dot
  • 00:49:58 component dot CSS I'm going to add mat a
  • 00:50:04 side nav container has a height of a
  • 00:50:07 hundred percent mat side nav and mat
  • 00:50:11 side nav content let's add some padding
  • 00:50:15 and finally just for the side nav I'm
  • 00:50:21 going to add a background color light
  • 00:50:25 coral and a width of 200 pixels
  • 00:50:31 if we now take a look at the browser it
  • 00:50:34 is much more clear the site now appears
  • 00:50:37 like an overlay on the main content and
  • 00:50:40 when I click outside the side nav it
  • 00:50:43 closes and we can see the main content
  • 00:50:47 now once we close it though there is no
  • 00:50:50 way to open it again
  • 00:50:51 so rather than setting the opened
  • 00:50:54 attribute like here let's bind it to a
  • 00:50:59 property which we can then control using
  • 00:51:02 a button we will be using two-way
  • 00:51:05 binding so the first step is to import
  • 00:51:07 the forms module in app module so open
  • 00:51:11 up dot module dot ES
  • 00:51:16 in Port forms module and add it to the
  • 00:51:19 imports array
  • 00:51:22 now let's go back to two-way binding an
  • 00:51:25 AB component dot es which is the
  • 00:51:28 component class I am going to create a
  • 00:51:31 new property called opened and set it to
  • 00:51:35 false next in the HTML bind the opened
  • 00:51:41 attribute to the opened property and
  • 00:51:43 create a button that will toggle the
  • 00:51:46 opened property value so for two-way
  • 00:51:50 binding we use banana in a box in tax so
  • 00:51:54 square brackets parenthesis and close it
  • 00:51:57 this is going to be equal to the
  • 00:51:59 property we just created opened next as
  • 00:52:04 part of the main content I'm going to
  • 00:52:06 add a button the text is going to be
  • 00:52:10 toggle opened and on click of this
  • 00:52:13 button so click handler we simply toggle
  • 00:52:17 the open value
  • 00:52:20 opened is equal to not off opened if you
  • 00:52:24 now say the files and take a look at the
  • 00:52:26 browser the sitemap should be initially
  • 00:52:29 hidden because we have initialized it to
  • 00:52:32 false I click on the button and the side
  • 00:52:35 nav is shown click outside the side nav
  • 00:52:38 and it automatically hides so this is
  • 00:52:42 the first method to show or hide the
  • 00:52:45 side nav before we take a look at the
  • 00:52:48 next method I want to quickly show you
  • 00:52:50 the different modes that can be applied
  • 00:52:53 to a side nav the mode for a side nav
  • 00:52:57 can be specified using the mode
  • 00:52:59 attribute on the mat side nav component
  • 00:53:03 the default mode is over mode is equal
  • 00:53:08 to over and this is the mode we have
  • 00:53:11 seen so far if you go back to the
  • 00:53:14 browser you can see that there is no
  • 00:53:18 change from what we have already seen
  • 00:53:20 the site now floats over the main
  • 00:53:22 content which is covered by a backdrop
  • 00:53:26 the second possible value for the mold
  • 00:53:29 attribute is push so I'm going to change
  • 00:53:32 over to push let's see how this works in
  • 00:53:36 the browser I click on the button the
  • 00:53:41 site map appears but this time the site
  • 00:53:44 map pushes the primary content out of
  • 00:53:46 its way covering it with a backdrop now
  • 00:53:50 the final possible mode is side so mode
  • 00:53:54 is equal to side
  • 00:53:56 in this mode the side nav appears
  • 00:54:00 side-by-side with the main content
  • 00:54:02 shrinking the main contents width to
  • 00:54:05 make space for the side nav so the three
  • 00:54:09 possible modes are over push and side
  • 00:54:13 I'm going to stick with site for the
  • 00:54:16 rest of this video now back to opening
  • 00:54:19 and closing the side nav we have seen
  • 00:54:22 the first method which is using the
  • 00:54:24 opened attribute the second way to open
  • 00:54:28 or close the side nav is by invoking the
  • 00:54:31 open or close methods on the side nav
  • 00:54:34 itself for this method I will create a
  • 00:54:38 template reference variable on the mat
  • 00:54:40 side nav component hash symbol and side
  • 00:54:44 nav now I can create two buttons that
  • 00:54:48 will call the open and close methods on
  • 00:54:52 this template reference variable button
  • 00:54:56 open on click it is going to call side
  • 00:55:00 nav dot open similarly button close on
  • 00:55:08 click side nav dot close let's save this
  • 00:55:14 file and go back to the browser I click
  • 00:55:17 on open and the side nav opens I click
  • 00:55:20 on close and the side nav closes so this
  • 00:55:24 is the second method the third method is
  • 00:55:28 to simply toggle the side nav by calling
  • 00:55:32 the toggle method this is also the
  • 00:55:35 approach you might want to take when you
  • 00:55:37 have a hamburger icon for example I will
  • 00:55:41 create another button in the main
  • 00:55:43 content and the text is going to be
  • 00:55:47 toggled
  • 00:55:48 on click of this button I simply call
  • 00:55:52 the toggle method on the side nav
  • 00:55:55 reference variable side nav dot toggle
  • 00:55:59 if I now go back to the browser click on
  • 00:56:03 the toggle button it opens I click again
  • 00:56:06 it closes so these are the three methods
  • 00:56:11 and if at all you want to perform some
  • 00:56:14 action on open or close off the side nav
  • 00:56:17 you can listen to the opened and closed
  • 00:56:21 events now back in vs code in AB
  • 00:56:25 component Diaz I am going to create a
  • 00:56:28 method called log which accepts a
  • 00:56:32 parameter called state and simply logs
  • 00:56:36 that to the console
  • 00:56:39 now in the HTML we can listen to opened
  • 00:56:43 and closed events and call our log
  • 00:56:46 method passing in the appropriate value
  • 00:56:49 so on mat side nav listen to opened
  • 00:56:54 event
  • 00:56:56 and call the log method passing in the
  • 00:56:59 string opened similarly on the closed
  • 00:57:04 event called the method passing in the
  • 00:57:08 string closed if you now head back to
  • 00:57:12 the browser open dev tools click on
  • 00:57:16 toggle you should see the message opened
  • 00:57:20 toggle again you should see the message
  • 00:57:23 closed now I am simply logging a message
  • 00:57:28 but you can perform any action that
  • 00:57:30 seems fit for your application so that
  • 00:57:35 is about the side nav in angular
  • 00:57:37 material
  • 00:57:42 all right let's take a look at menus in
  • 00:57:45 this video basically a menu displays a
  • 00:57:48 list of choices on a temporary surface
  • 00:57:52 the choices appear when users interact
  • 00:57:55 with the button action or some other
  • 00:57:57 type of control now as always the first
  • 00:58:01 step is to import the appropriate module
  • 00:58:04 so in material dot module Diaz I'm going
  • 00:58:07 to import mat menu module and add it to
  • 00:58:12 the material array
  • 00:58:15 now let's go to app component dot HTML
  • 00:58:19 and over here to create a menu we use
  • 00:58:23 the math menu component to specify the
  • 00:58:29 choices for a menu we use the button
  • 00:58:31 elements with a math menu item attribute
  • 00:58:35 button fronton is the text and we add
  • 00:58:40 the mat menu item attribute
  • 00:58:46 similarly let's also have backand as a
  • 00:58:49 menu item if you save this and take a
  • 00:58:54 look at the browser you're not going to
  • 00:58:56 see anything that is because by itself
  • 00:59:00 the Matt menu element does not render
  • 00:59:03 anything it has to be triggered from a
  • 00:59:07 UI element or programmatically so let's
  • 00:59:11 add an element to open the menu I'm
  • 00:59:14 going to add a button element and add
  • 00:59:18 the attribute mat flat button for some
  • 00:59:22 styling the text is going to be menu now
  • 00:59:28 that we have the element we need to
  • 00:59:30 associate the menu with this element and
  • 00:59:34 that is a quick two step process first
  • 00:59:37 step on the mat menu component create a
  • 00:59:41 template reference variable and assign
  • 00:59:43 to it the mat menu directive up menu is
  • 00:59:48 the variable name and assign mat menu
  • 00:59:54 second step link the button with the
  • 00:59:57 template reference variable using the
  • 00:59:59 mat menu trigger for directive so on
  • 01:00:03 this button mat menu trigger for and
  • 01:00:10 then assign the reference variable app
  • 01:00:14 menu in simple English hey there is a
  • 01:00:19 menu called
  • 01:00:20 app menu which can be triggered by this
  • 01:00:22 menu button now if we say the file and
  • 01:00:26 take a look at the browser we have the
  • 01:00:29 menu button click on the button and you
  • 01:00:32 can see the menu so this is how you
  • 01:00:36 create a basic menu next let's see how
  • 01:00:40 to create a nested menu the first step
  • 01:00:43 is to create the submenu and we are
  • 01:00:46 going to repeat the process of creating
  • 01:00:48 a menu and attaching a template
  • 01:00:51 reference variable so mat menu I'm going
  • 01:00:55 to add three menu items
  • 01:00:59 the first one is going to be angular the
  • 01:01:03 second one react and the turbulent view
  • 01:01:08 on the mat menu component I'm going to
  • 01:01:12 add the reference variable this is going
  • 01:01:15 to be called sub menu and we assigned
  • 01:01:18 the map menu directive all right we have
  • 01:01:22 created a sub menu and this is a sub
  • 01:01:26 menu for the front end choice in the
  • 01:01:29 main menu so all we have to do is add
  • 01:01:33 the trigger directive again on this item
  • 01:01:39 map menu trigger for submenu in simple
  • 01:01:44 English
  • 01:01:45 hey this front-end menu choice is going
  • 01:01:48 to trigger this submenu if we save this
  • 01:01:52 and take a look at the browser you can
  • 01:01:54 see that we have the nested menu you
  • 01:01:57 don't have to click on front-end when
  • 01:02:00 you hover on the choice the submenu is
  • 01:02:02 opened angular react and view and one of
  • 01:02:06 the useful options when it comes to a
  • 01:02:08 menu is with respect to the positioning
  • 01:02:11 of the menu we have X position and y
  • 01:02:16 position attributes so on the map menu
  • 01:02:20 component we can specify X position and
  • 01:02:24 white position X position can take
  • 01:02:29 values of before or after and Y position
  • 01:02:34 can take values of above or below let's
  • 01:02:38 go with after and above
  • 01:02:43 if you take a look at the browser click
  • 01:02:47 on menu you can see that the menu opens
  • 01:02:50 to the right so exposition is working
  • 01:02:52 fine but the menu still opens below the
  • 01:02:56 button and that is simply because there
  • 01:02:59 is no space available at the top let's
  • 01:03:02 reposition the button in the CSS file
  • 01:03:06 let me add a class
  • 01:03:10 Center margin is going to be 10 REMS
  • 01:03:15 back in the HTML let's add the class to
  • 01:03:18 the button element
  • 01:03:22 now if we go back to the browser and
  • 01:03:25 click on the element you can see that
  • 01:03:29 the menu opens to the right and to the
  • 01:03:31 top so x position and y position before
  • 01:03:37 after for exposition about and below for
  • 01:03:40 y position these attributes control the
  • 01:03:43 position of the menu now the last thing
  • 01:03:47 I want to talk about is lazy rendering
  • 01:03:50 by default the menu choices are
  • 01:03:53 initialized even before the menu is
  • 01:03:56 opened that is even before clicking on
  • 01:03:59 the menu button the choices have already
  • 01:04:03 been said for the menu we can differ
  • 01:04:06 initialization until the menu is open
  • 01:04:09 using the ng template directive and mat
  • 01:04:13 menu content attribute this allows us to
  • 01:04:17 have dynamic content as many choices
  • 01:04:20 let's see how I'm going to create a new
  • 01:04:23 menu
  • 01:04:26 Matt menu I'm going to add a reference
  • 01:04:29 variable called lazy menu and set it to
  • 01:04:33 Matt menu within the menu component we
  • 01:04:37 are going to use the ng template
  • 01:04:39 directive and within this directive we
  • 01:04:43 specify the menu items the first one is
  • 01:04:48 going to be a Settings button and the
  • 01:04:50 second one is going to be the text
  • 01:04:53 logout now what I am going to do is
  • 01:04:57 create to trigger buttons to this same
  • 01:05:00 menu button the text is going to be
  • 01:05:04 vishwas Matt menu trigger four is equal
  • 01:05:08 to lazy menu
  • 01:05:10 similarly another button that says code
  • 01:05:14 evolution and we trigger the same lazy
  • 01:05:19 menu if we now save the file and take a
  • 01:05:22 look at the browser if I click on
  • 01:05:25 Vishwas the menu is not quite opening
  • 01:05:29 and that is because we left out the Matt
  • 01:05:34 menu content attribute on the ng
  • 01:05:39 template tag so let's save the file and
  • 01:05:41 try again
  • 01:05:42 I'm going to go back to the browser
  • 01:05:44 click on Vishwas and you can see we have
  • 01:05:47 the menu click on code evolution and you
  • 01:05:50 can see that we have the same menu again
  • 01:05:52 now what we want is if I click on wish
  • 01:05:56 wasps I mean the choice to be logout
  • 01:05:59 vishwas and if I click on code evolution
  • 01:06:03 I want the menu to say logout code
  • 01:06:06 evolution basically we are looking at
  • 01:06:08 dynamic choices for that we make use of
  • 01:06:12 math menu trigger data attribute so back
  • 01:06:17 in the component HTML on the trigger
  • 01:06:21 buttons we add in an extra attribute
  • 01:06:25 this attribute is mat menu trigger data
  • 01:06:32 this is going to be equal to an object
  • 01:06:36 let's pass in a name which is vishwas
  • 01:06:42 similarly on the second trigger button
  • 01:06:45 we're going to pass in name but this
  • 01:06:48 time it is going to be code evolution
  • 01:06:50 now I've just reformatted this and we
  • 01:06:53 have the two buttons still in place one
  • 01:06:56 for vishwas and one for code evolution
  • 01:07:00 now that we have specified the data on
  • 01:07:03 the ng template tag we create a local
  • 01:07:08 variable let name is equal to name and
  • 01:07:13 in the menu choice we can now use
  • 01:07:17 interpolation with that variable double
  • 01:07:21 curly braces and name now if we go back
  • 01:07:25 to the browser
  • 01:07:26 click on vishwas it says log out vishwas
  • 01:07:31 and if I click on code evolution it says
  • 01:07:34 log out code evolution so what is
  • 01:07:37 happening is on the trigger button we
  • 01:07:40 specify the map menu trigger data
  • 01:07:43 attribute and we specify the name so we
  • 01:07:46 are saying hey I know that this button
  • 01:07:48 is a trigger for a menu but when I am
  • 01:07:51 triggering that menu let me pass some
  • 01:07:54 additional information that the menu can
  • 01:07:57 use to dynamically render some data now
  • 01:08:00 in the map menu component we use the ng
  • 01:08:03 template tag and on the ng template tag
  • 01:08:06 we specify this name variable that we
  • 01:08:10 want to access and that can be
  • 01:08:12 interpolated in the button element that
  • 01:08:16 is how we have log out vishwas let's add
  • 01:08:21 one more property so that we really
  • 01:08:23 understand how it works to the trigger
  • 01:08:26 data object I'm going to add a new
  • 01:08:28 property called hobby for vishwas the
  • 01:08:32 hobby is football and for code evolution
  • 01:08:39 the hobby is teaching now in the menu on
  • 01:08:43 the ng template tag we declare another
  • 01:08:46 variable
  • 01:08:49 let hobby is equal to hobby and now we
  • 01:08:58 can add a new menu choice and bind the
  • 01:09:01 hobby so button hobby is mind hobby and
  • 01:09:09 let me also add mad menu item if we now
  • 01:09:14 save the file and take a look at the
  • 01:09:16 browser click on the choise hobby is
  • 01:09:19 football click on code evolution hobby
  • 01:09:22 is teaching you can see that we have
  • 01:09:25 different menu choices for the two
  • 01:09:27 elements say menu with dynamic content
  • 01:09:31 all right that is about navigation and
  • 01:09:35 menus in angular material
  • 01:09:37 let me quickly point you to the
  • 01:09:39 documentation go to components go to
  • 01:09:43 navigation menu API for the module that
  • 01:09:47 you have to import and then the examples
  • 01:09:49 to take a look at some of the examples
  • 01:09:52 you can use in the next section let's
  • 01:09:55 take a look at components related to
  • 01:09:57 layouts in angular material
  • 01:10:03 angular material provides a number of
  • 01:10:06 components for laying out elements let's
  • 01:10:09 begin with the list component in this
  • 01:10:11 video first step is to import the module
  • 01:10:16 so in material module Diaz import mat
  • 01:10:20 list module and added to the material
  • 01:10:23 array now in the HTML we can create a
  • 01:10:28 basic list mat list is the component and
  • 01:10:32 this component has mat list item
  • 01:10:43 as its children if we save this and take
  • 01:10:47 a look at the browser you can see that
  • 01:10:48 we have a list of items being displayed
  • 01:10:52 now suppose you have a list where the
  • 01:10:54 list item is just a lot of text for such
  • 01:10:58 scenarios we have the dense attribute
  • 01:11:01 apply it on the mat list component and
  • 01:11:05 it will reduce the font size if you take
  • 01:11:09 a look at the browser you can see that
  • 01:11:11 the font size has been reduced the mat
  • 01:11:15 list module also provides components to
  • 01:11:17 create a navigation list the component
  • 01:11:21 is mat named list as children to this
  • 01:11:26 component you have to specify anchor
  • 01:11:29 tags with the mat list item attribute so
  • 01:11:33 anchor tag
  • 01:11:35 Matt list item attribute
  • 01:11:39 and let's just add each ref is equal to
  • 01:11:42 a hashtag I'm going to create two more
  • 01:11:46 list items
  • 01:11:48 about and services if you save the file
  • 01:11:53 and take a look at the browser you can
  • 01:11:55 see that we have a navigation list a
  • 01:11:58 good place for this would be the sitemap
  • 01:12:01 component which we learned earlier in
  • 01:12:03 the series now it is also possible to
  • 01:12:06 create multiline lists and also include
  • 01:12:09 material icons I'm going to comment this
  • 01:12:13 out and start a new list some add lists
  • 01:12:17 and within the Mathis component we are
  • 01:12:21 going to have a mat list item within the
  • 01:12:26 list item we can add a material icon
  • 01:12:30 Matt icon and let's go with home we can
  • 01:12:35 then add a heading with Matt line
  • 01:12:39 attribute after that a paragraph with a
  • 01:12:44 matte line attribute if you save this
  • 01:12:47 and take a look at the browser you can
  • 01:12:49 see that the list item has two lines one
  • 01:12:53 for heading and one for the paragraph we
  • 01:12:56 also have the icon and it looks like
  • 01:12:59 I've forgotten the attribute on Matt
  • 01:13:01 icon so let's add Matt list icon
  • 01:13:06 if we save this and take a look at the
  • 01:13:08 browser you can see that the list item
  • 01:13:11 has two lines one for heading and one
  • 01:13:14 for the paragraph we also have the icon
  • 01:13:17 to the left let me add another list item
  • 01:13:21 I'm going to copy this mat list item
  • 01:13:23 component paste it I'm going to change
  • 01:13:27 home to folder this is going to be
  • 01:13:32 heading 2 and then line to save the file
  • 01:13:36 and take a look at the browser we have
  • 01:13:38 two items in the list which contain
  • 01:13:41 multiple lines now you can see that we
  • 01:13:45 don't really have a clear distinction
  • 01:13:47 between the list items for that purpose
  • 01:13:51 angular material provides another module
  • 01:13:53 namely mat divider module so in material
  • 01:13:57 module TS let's import it then add it to
  • 01:14:02 the material array mat divider module
  • 01:14:06 now in the HTML in between the two list
  • 01:14:11 items we can add the mat divider
  • 01:14:14 component so right after the first list
  • 01:14:16 item mat divider now if we take a look
  • 01:14:21 at the browser you can see that there is
  • 01:14:23 a clear separation between the list
  • 01:14:26 items right now we have the list items
  • 01:14:29 hard-coded but typically you would use
  • 01:14:31 the mg4 directive on an array of data so
  • 01:14:36 to create lists you can use the mat list
  • 01:14:40 and mat divider modules let's take a
  • 01:14:44 look at grids in the next video
  • 01:14:50 all right let's take a look at the
  • 01:14:52 material grid list in this video the
  • 01:14:56 grid list is basically a two dimensional
  • 01:14:58 list view that arranged ourselves into
  • 01:15:00 grid-based layout now the first step is
  • 01:15:04 to import the module so in material
  • 01:15:06 Mario Diaz import mat grid list module
  • 01:15:11 and added to the material array mat grid
  • 01:15:16 list module now we can create a grid
  • 01:15:19 list the component is mat grid list and
  • 01:15:24 this component requires a calls
  • 01:15:27 attribute which specifies the number of
  • 01:15:30 columns in the grid let's go with two
  • 01:15:33 columns so calls is equal to two as
  • 01:15:37 children to this component we specify
  • 01:15:40 Matt grid tile components
  • 01:15:44 title 1 and similarly let's create three
  • 01:15:48 more also to be able to clearly see the
  • 01:15:52 grid let's add a background color to the
  • 01:15:55 tiles so in the CSS file Matt grid tile
  • 01:16:01 background color light blue now if we
  • 01:16:06 save this and take a look at the browser
  • 01:16:08 you can see the grid with two columns
  • 01:16:11 and two rows the question is how did it
  • 01:16:15 create the two rows for a grid we always
  • 01:16:19 specify the number of columns and the
  • 01:16:22 number of rows is determined by how many
  • 01:16:24 columns we want and the number of tiles
  • 01:16:27 specified since we have 4 tiles and two
  • 01:16:31 columns it can fit only two tiles in
  • 01:16:34 each row hence it creates an additional
  • 01:16:37 row to fit the next two tiles if you
  • 01:16:40 were to have five tiles there would be
  • 01:16:42 three rows so the number of rows is
  • 01:16:45 determined by some basic math of course
  • 01:16:49 you can also specify how many rows or
  • 01:16:52 columns each tile should take up that
  • 01:16:56 can be specified using the row span and
  • 01:16:58 called span attributes on tile one if I
  • 01:17:02 said row span is equal to two and take a
  • 01:17:07 look at the browser you can see that it
  • 01:17:09 takes up two rows instead of one
  • 01:17:12 similarly if I said call span is equal
  • 01:17:16 to two
  • 01:17:19 you can see that it takes up two columns
  • 01:17:21 instead of one when specifying called
  • 01:17:25 span though you need to make sure that
  • 01:17:27 it does not exceed the calls attribute
  • 01:17:30 if it does it throws an error all right
  • 01:17:34 next let's talk about the height of each
  • 01:17:37 row in the grid by default the height of
  • 01:17:40 a row is equal to the width of a column
  • 01:17:44 however you can override this using the
  • 01:17:47 row height attribute and you can specify
  • 01:17:50 one of the three values the first one is
  • 01:17:54 a straightforward value so row height is
  • 01:17:57 equal to a hundred pixels take a look at
  • 01:18:02 the browser and you can see that each
  • 01:18:04 row will be a hundred pixels tall the
  • 01:18:08 second option is to specify the row
  • 01:18:10 height as a ratio with respect to the
  • 01:18:13 column width for example row height is
  • 01:18:17 equal to 2 is to 1 this implies that the
  • 01:18:22 row height is 1/2 the column width if
  • 01:18:25 the column width is 200 pixels then the
  • 01:18:28 row height is a hundred pixels take a
  • 01:18:31 look at the browser and you can clearly
  • 01:18:33 see from each style that the height
  • 01:18:36 looks half the width the third option is
  • 01:18:40 to fit the height based on the container
  • 01:18:43 so row height is equal to fit but this
  • 01:18:48 time we also need to specify a height
  • 01:18:51 for the container so style height 200
  • 01:18:55 pixels now if we take a look at the
  • 01:18:58 browser the rows are fit into the
  • 01:19:00 container height of 200 pixels so each
  • 01:19:04 row has a height of 100 pixels if there
  • 01:19:09 were 4 rows each row would be 50 pixels
  • 01:19:12 so as to fit the total container height
  • 01:19:14 of 200 pixels all right the last
  • 01:19:18 attribute I want to discuss on a good
  • 01:19:20 list is the gutter size that is spacing
  • 01:19:24 between the tiles we can specify gutter
  • 01:19:27 size using the gutter size property
  • 01:19:30 let's go with gutter size
  • 01:19:33 is equal to 10 pixels if you save the
  • 01:19:39 file and take a look at the browser you
  • 01:19:41 should now see additional spacing
  • 01:19:43 between the different tiles
  • 01:19:48 welcome back everyone in this video
  • 01:19:51 let's take a look at expansion panels
  • 01:19:53 and accordions in angular material
  • 01:19:57 expansion panels are basically panels
  • 01:20:00 which can collapse or expand to display
  • 01:20:02 additional details in a view let's take
  • 01:20:06 a look at some examples to get started
  • 01:20:09 import matte expansion module and add it
  • 01:20:13 to the material array so in material
  • 01:20:15 module Diaz imported
  • 01:20:20 and add it to the material array now in
  • 01:20:24 the HTML let's create an expansion panel
  • 01:20:28 the component to use is matte expansion
  • 01:20:31 panel every panel must contain a panel
  • 01:20:35 header component
  • 01:20:37 it is this header which is displayed
  • 01:20:41 when the panel is collapsed a header can
  • 01:20:45 contain a title and a description we use
  • 01:20:49 math panel title
  • 01:20:53 to add the title angular fundamentals
  • 01:20:56 and mat panel description to add a short
  • 01:21:02 description for the panel total duration
  • 01:21:05 three hours if you now save the file and
  • 01:21:09 take a look at the browser we should
  • 01:21:12 have an expansion panel you can see the
  • 01:21:14 title and the description as well when I
  • 01:21:18 click on the header the panel expands
  • 01:21:21 right now the panel content is empty
  • 01:21:24 let's go back and add some text outside
  • 01:21:28 the header but within the expansion
  • 01:21:30 panel I'm going to add a paragraph this
  • 01:21:35 is the panel content add course details
  • 01:21:40 material also provides an action row
  • 01:21:44 component which I'm going to add here
  • 01:21:46 mat action row a button tag with the
  • 01:21:52 text enroll
  • 01:21:55 and Matt button attribute if you now
  • 01:21:59 take a look at the browser we have the
  • 01:22:01 panel I click on the header and we have
  • 01:22:04 the panel content a paragraph tag and
  • 01:22:07 the action row which floats the Android
  • 01:22:11 button to the right the panel details
  • 01:22:14 can be any HTML you wish to and is not
  • 01:22:17 limited to a paragraph tag but this is
  • 01:22:21 pretty much how you create a basic
  • 01:22:23 expansion panel with angular material
  • 01:22:27 next let's take a look at creating
  • 01:22:29 accordions an accordion is basically
  • 01:22:32 multiple expansion panels grouped
  • 01:22:35 together let's start off by duplicating
  • 01:22:39 the existing panel and changing the
  • 01:22:41 header and the description
  • 01:22:48 I will change the title to angular
  • 01:22:51 material
  • 01:22:53 and the total duration to two hours I
  • 01:22:56 believe the content and action row as is
  • 01:23:00 if you now take a look at the browser we
  • 01:23:04 should have two panels the two panels
  • 01:23:07 don't work independently of each other
  • 01:23:10 let's add the Matt accordion component
  • 01:23:13 to convert these panels into an
  • 01:23:15 accordion
  • 01:23:17 so back in vs code I'm going to add the
  • 01:23:21 Matt accordion component
  • 01:23:24 and the two expansion panels are
  • 01:23:27 children of this component if we now
  • 01:23:32 take a look at the browser we still have
  • 01:23:35 the two panels but this time when you
  • 01:23:39 try to expand the second panel the first
  • 01:23:42 one collapses automatically the
  • 01:23:45 accordion also adds a bit of margin
  • 01:23:47 between the panels which would otherwise
  • 01:23:49 not be present now if at all you want
  • 01:23:53 multiple panels to be shown at the same
  • 01:23:55 time you can set multi is equal to true
  • 01:23:59 on the mat accordion component
  • 01:24:05 if you take a look at the browser you
  • 01:24:08 can see that we can now expand both the
  • 01:24:11 panels at the same time and if you
  • 01:24:14 notice to the right of the panel header
  • 01:24:16 we have the toggle icon if at all for
  • 01:24:20 some reason you want to hide this simply
  • 01:24:23 add the height toggle attribute on the
  • 01:24:26 accordion hide toggle take a look at the
  • 01:24:31 browser now it is hidden now there are a
  • 01:24:35 couple of methods which could be useful
  • 01:24:37 depending on your requirement so I will
  • 01:24:40 leave them for you to explore the
  • 01:24:43 methods are pretty much like what we
  • 01:24:45 have already seen in some of the other
  • 01:24:47 components there are methods to open or
  • 01:24:51 close the panel's programmatically and
  • 01:24:53 also events to know when a panel is
  • 01:24:56 expanded or collapsed but this is pretty
  • 01:25:01 much the gist on how to create expansion
  • 01:25:04 panels and accordions with angular
  • 01:25:06 material
  • 01:25:11 the next layered component we are going
  • 01:25:14 to talk about is cards a cart is a
  • 01:25:17 container for content and actions about
  • 01:25:20 a single topic first step as always is
  • 01:25:24 to import the module so in material
  • 01:25:26 module Diaz we're going to import mat
  • 01:25:30 card module and add it to the material
  • 01:25:32 array now we can create a basic card in
  • 01:25:36 the HTML the component is Matt – card
  • 01:25:41 and I'm going to add the text basic card
  • 01:25:45 if you take a look at the browser you
  • 01:25:48 should be able to see a basic card now
  • 01:25:52 angular material provides a few
  • 01:25:53 predefined sections that can be used
  • 01:25:56 inside this mat card component let's
  • 01:25:59 take a look at them at the top we
  • 01:26:02 usually have a card title so we are
  • 01:26:05 going to add mat card title with the
  • 01:26:09 text card title after that we have the
  • 01:26:14 text content displayed using the card
  • 01:26:16 content section so mat card content and
  • 01:26:21 I'm going to add the text this is the
  • 01:26:24 card content and finally at the bottom
  • 01:26:27 we have a section for user actions for
  • 01:26:31 example
  • 01:26:32 button clicks the component is mat card
  • 01:26:35 actions component and within the tags
  • 01:26:40 I'm going to add a button that says
  • 01:26:43 login and I'm going to add mat flat
  • 01:26:46 button attribute
  • 01:26:49 now if we save this and take a look at
  • 01:26:51 the browser you can see that we have the
  • 01:26:53 title the content and the action section
  • 01:26:57 now if you want the button right aligned
  • 01:27:00 we can do so using the align attribute
  • 01:27:02 on the actions section a line is equal
  • 01:27:06 to end now take a look at the browser
  • 01:27:09 and you can see that the action section
  • 01:27:12 is right aligned and this is the basic
  • 01:27:16 idea behind cards there are a couple
  • 01:27:19 more sections with which you can truly
  • 01:27:22 build any card layout that you wish to
  • 01:27:24 so let me point you to the documentation
  • 01:27:26 in components under layout card and then
  • 01:27:33 under examples you can see a
  • 01:27:35 full-fledged application of a card it
  • 01:27:39 has a header with an avatar title
  • 01:27:41 subtitle and image content and actions
  • 01:27:47 you can also build your own cards for a
  • 01:27:50 registration form a login form pricing
  • 01:27:53 section user profiles and a lot more one
  • 01:27:57 component to fulfill a variety of
  • 01:27:59 requirements now if you want the code
  • 01:28:02 for this particular card just click on
  • 01:28:05 View source and you have the HTML
  • 01:28:12 in this video let's take a look at tabs
  • 01:28:15 in angular material tabs basically allow
  • 01:28:19 you to organize content into separate
  • 01:28:21 views where only one view can be visible
  • 01:28:23 at a given time
  • 01:28:26 now first step let's import the tabs
  • 01:28:28 module say material module TS we're
  • 01:28:31 going to import mat tabs module and add
  • 01:28:34 it to the material array
  • 01:28:38 now we can create tabs in the HTML the
  • 01:28:42 component is mat tab group
  • 01:28:47 and within the opening and closing tags
  • 01:28:49 each tab is represented using the mat
  • 01:28:53 tab component
  • 01:28:58 each tab will have a label and the
  • 01:29:01 content let's add the labels angular
  • 01:29:04 react and view
  • 01:29:13 and the content as angular content react
  • 01:29:16 content and view content
  • 01:29:25 now if you save the files and take a
  • 01:29:27 look at the browser you should see three
  • 01:29:30 tabs one each for angular react and view
  • 01:29:36 if you want to know which tab is active
  • 01:29:39 at any point of time you can use the
  • 01:29:42 selected index property so back in the
  • 01:29:45 HTML add a template reference variable
  • 01:29:48 on mat tab group
  • 01:29:52 and then we can use interpolation to
  • 01:29:54 view the property value tab Rev dot
  • 01:29:59 selected index if you take a look at the
  • 01:30:02 browser you can see that initially it
  • 01:30:05 displays 0 because index starts from 0
  • 01:30:08 click on react it changes to 1 and view
  • 01:30:13 changes to 2 now if you want to perform
  • 01:30:16 some operation when you are changing
  • 01:30:18 tabs you can listen to the selected tab
  • 01:30:21 change event so back in the HTML
  • 01:30:26 bind to selected tab change and as an
  • 01:30:30 event handler
  • 01:30:31 let's call log change and pass in the
  • 01:30:36 selected index
  • 01:30:41 in the component class I'm going to
  • 01:30:44 simply lock the index to the console
  • 01:30:51 now if you go back to the browser
  • 01:30:54 open the console and change the index
  • 01:30:59 you can see the selected index being
  • 01:31:02 logged so when the tab changes you can
  • 01:31:06 perform any operation you want to using
  • 01:31:08 the selected tab change event
  • 01:31:15 the last layout related component we are
  • 01:31:18 going to take a look at is the stepper
  • 01:31:20 component steppers basically can make
  • 01:31:23 progress through numbered steps let's
  • 01:31:27 take a look at an example
  • 01:31:29 first up import map stepper module and
  • 01:31:33 add it to the material array
  • 01:31:37 now we can create our stuffer in the
  • 01:31:40 HTML there are two types of steppers
  • 01:31:44 horizontal and vertical first let's take
  • 01:31:48 a look at the horizontal stepper and
  • 01:31:50 later on switch to the vertical stepper
  • 01:31:54 to create a horizontal stepper we use
  • 01:31:57 the mat horizontal stepper component
  • 01:32:01 within this component to specify the
  • 01:32:04 individual steps we use the mat step
  • 01:32:07 component
  • 01:32:10 for each step we specify the label using
  • 01:32:13 the label attribute and the content goes
  • 01:32:17 in between the opening and closing tags
  • 01:32:20 let's create three steps we can all
  • 01:32:23 relate to that is the checkout process
  • 01:32:26 of an e-commerce site so step one is
  • 01:32:30 going to be for shipping address
  • 01:32:37 step2 for billing address and step3 for
  • 01:32:42 placing an order if you now save the
  • 01:32:46 files and take a look at the browser you
  • 01:32:48 should be able to see the horizontal
  • 01:32:50 stepper we have three steps each step
  • 01:32:53 has a label and a numeric value
  • 01:32:56 indicating the step you can click on the
  • 01:33:00 label to navigate to the particular step
  • 01:33:03 once you navigate a widow the icon
  • 01:33:06 changes from the numeric value to the
  • 01:33:08 Edit icon
  • 01:33:09 so the stepper basically gives you an
  • 01:33:12 idea of your progress through the
  • 01:33:15 checkout process right now we are
  • 01:33:18 navigating to the different steps by
  • 01:33:21 clicking on the label however stepper
  • 01:33:24 also supports a previous and Next button
  • 01:33:27 out of the box all you have to do is
  • 01:33:30 include the map stepper previous and
  • 01:33:33 match stepper next directives so for the
  • 01:33:38 billing address step let me add both
  • 01:33:40 these buttons
  • 01:33:43 button back this is going to be Matt
  • 01:33:47 button for styling and then Matt stepper
  • 01:33:50 previous to go back one step
  • 01:33:54 similarly we have the next button
  • 01:34:02 if you now go back to the browser we
  • 01:34:05 should have these two buttons under
  • 01:34:08 billing address if I click on back we go
  • 01:34:12 back one step and if I click on next
  • 01:34:16 we go forward one step so these are the
  • 01:34:22 stepper buttons next let's talk about
  • 01:34:25 linear steps if you have noticed we can
  • 01:34:28 jump from step one to step two and then
  • 01:34:32 to step three without any restrictions
  • 01:34:35 in certain situations though you want
  • 01:34:38 the user to complete a step before they
  • 01:34:41 can proceed with the subsequent steps
  • 01:34:44 linear steppers are meant exactly for
  • 01:34:47 that to convert a regular stepper into a
  • 01:34:50 linear stepper there are two steps the
  • 01:34:53 first step is to add the linear
  • 01:34:55 attribute to the mat horizontal stepper
  • 01:34:58 component
  • 01:35:00 linear the second step is to add a
  • 01:35:04 completed attribute to the individual
  • 01:35:07 steps to each step I will add attribute
  • 01:35:10 and set it defaults
  • 01:35:19 if you now go back to the browser I
  • 01:35:23 click on billing address you can see
  • 01:35:25 that we are not navigated to step two
  • 01:35:27 step one is not completed and hence we
  • 01:35:32 cannot proceed if I change step one
  • 01:35:35 completed to true
  • 01:35:39 you can see that now we can proceed to
  • 01:35:42 step two and since step two is not
  • 01:35:45 completed we cannot proceed to step 3
  • 01:35:49 and for this example I am hard-coding
  • 01:35:52 true or false but ideally you need to
  • 01:35:55 have properly winding with this
  • 01:35:57 completed property based on your
  • 01:36:01 requirements after the user interacts
  • 01:36:04 with the step call a method that will
  • 01:36:06 update the completed property to true
  • 01:36:09 which will then allow the user to
  • 01:36:11 navigate to the next step and if at all
  • 01:36:14 you do have a step which is optional you
  • 01:36:17 can simply place the optional attribute
  • 01:36:19 on that particular step on step two I
  • 01:36:22 will add the attribute optional and now
  • 01:36:27 if you go back to the browser you can
  • 01:36:30 see that we can navigate all the way to
  • 01:36:31 step three even though we have completed
  • 01:36:35 attribute set to false for step number
  • 01:36:37 two you can also see the optional text
  • 01:36:40 being displayed for building address all
  • 01:36:44 right what we have seen is a horizontal
  • 01:36:46 stepper you can also create vertical
  • 01:36:49 steppers with angular material simply
  • 01:36:52 change mat horizontal stepper to mat
  • 01:36:55 vertical stepper
  • 01:36:59 and you can see that we have the exact
  • 01:37:02 same stepper but this time with vertical
  • 01:37:05 orientation well that is about
  • 01:37:08 components related to layout in angular
  • 01:37:11 material starting next video let's take
  • 01:37:14 a look at components related to forms
  • 01:37:21 in this video let's take a look at the
  • 01:37:23 components related to an input in
  • 01:37:25 angular material when it comes to
  • 01:37:29 controls like inputs text areas and
  • 01:37:32 select we always discuss them in
  • 01:37:35 relation to a common wrapper component
  • 01:37:37 and that is the form field component so
  • 01:37:42 when you talk about an input component
  • 01:37:43 you're effectively talking about the for
  • 01:37:46 field component and the input component
  • 01:37:49 let's take a closer look at both those
  • 01:37:52 components in this video the first step
  • 01:37:55 is to import the two concerned modules
  • 01:37:58 so in material module dot es I'm going
  • 01:38:01 to import mat form field module and mat
  • 01:38:06 input module
  • 01:38:07 make sure to add them to the material
  • 01:38:09 array as well
  • 01:38:12 now we can create our first input
  • 01:38:15 control so in AB component HTML I'm
  • 01:38:20 going to add mat form field and within
  • 01:38:24 these tags I'm going to add input with a
  • 01:38:29 matte input attribute please make note
  • 01:38:32 that every input element has to have
  • 01:38:35 this form field wrapper and to the input
  • 01:38:38 element itself we add the mat input
  • 01:38:41 attribute now if I save this and take a
  • 01:38:45 look at the browser you can see that we
  • 01:38:47 have the most basic material input
  • 01:38:50 element let's see how we can customize
  • 01:38:53 this input control first up let's see
  • 01:38:56 how to add a label to the input field so
  • 01:38:59 to add a label use the mat label
  • 01:39:01 component so within the mat form field
  • 01:39:04 opening tag mat label and let's call
  • 01:39:07 this name if you take a look at the
  • 01:39:10 browser you can see the label it behaves
  • 01:39:14 as a placeholder when there is no text
  • 01:39:17 start typing and the label floats to the
  • 01:39:20 top and this is the default behavior we
  • 01:39:25 can of course change this so on the form
  • 01:39:27 field make use of the float label
  • 01:39:31 attribute to control the behavior of the
  • 01:39:33 label
  • 01:39:36 so float label can be set to never in
  • 01:39:40 which case the label will not float and
  • 01:39:44 is hidden when you type something you
  • 01:39:48 can also set it to always
  • 01:39:51 in which case the label is floating even
  • 01:39:55 when there is no text in the input and
  • 01:39:57 you can also set it to auto which is the
  • 01:40:01 default value
  • 01:40:06 another important point is how the label
  • 01:40:09 is presented for a required form field
  • 01:40:12 so if I mark the input element as
  • 01:40:15 required
  • 01:40:20 you can see that now the label has the
  • 01:40:23 asterisk automatically appended no
  • 01:40:26 additional styling is required if you
  • 01:40:29 want to disable this behavior you can
  • 01:40:32 make use of the height required marker
  • 01:40:34 attribute on the form field so height
  • 01:40:38 required marker if I go back to the
  • 01:40:42 browser the asterisk is not present for
  • 01:40:45 a required field the next thing we can
  • 01:40:48 do with the form field is setting a hint
  • 01:40:50 label for that we make use of the matte
  • 01:40:53 hint component so within the form field
  • 01:40:56 I'm going to add matte hint and let's
  • 01:41:02 have min five characters if you take a
  • 01:41:07 look at the browser you can see that the
  • 01:41:09 hint is placed right below the input and
  • 01:41:12 by default it is left aligned we can
  • 01:41:16 right align it using the align attribute
  • 01:41:18 and setting it to a value of end so Matt
  • 01:41:21 hint a line is equal to end if you go
  • 01:41:29 back to the browser you can see that the
  • 01:41:31 hint is now right aligned next let's
  • 01:41:35 talk about appearance we can control the
  • 01:41:38 appearance of the font field using the
  • 01:41:40 appearance attribute by default the
  • 01:41:43 appearance has a value of legacy which
  • 01:41:46 is what we've seen so far so appearance
  • 01:41:50 is equal to legacy we also have an
  • 01:41:55 appearance value of standard and this is
  • 01:41:58 just an updated version with more
  • 01:42:00 consistent spacing so I'm going to copy
  • 01:42:04 pasted it and change appearance legacy
  • 01:42:08 to standard if I save this and go back
  • 01:42:12 to the browser you can see that there is
  • 01:42:14 slight difference in how the spacing is
  • 01:42:17 for the standard appearance now we have
  • 01:42:22 two more appearances fill and outline so
  • 01:42:26 this is going to be fill this is going
  • 01:42:29 to be outline the fill appearance this
  • 01:42:33 plays the form filled with a filled
  • 01:42:35 background and the outline appearance
  • 01:42:37 shows the form filled with a border all
  • 01:42:40 the way around and not just an underline
  • 01:42:43 so if I go back to the browser you can
  • 01:42:45 see that we have a filled input element
  • 01:42:47 and then we also have one which has
  • 01:42:50 border all the way around so this is
  • 01:42:54 Phil and this is appearance outline
  • 01:42:57 finally let's discuss about theming by
  • 01:43:01 default the colors reflect the primary
  • 01:43:04 color of the theme we can set the color
  • 01:43:07 attribute to accent and also warn if
  • 01:43:10 required so on the form field color is
  • 01:43:15 equal to accent and on this one color is
  • 01:43:19 equal to warn if you now take a look at
  • 01:43:22 the browser the first control is accent
  • 01:43:25 themed and the second is warning themed
  • 01:43:29 now on a side note please go through the
  • 01:43:32 documentation on how to incorporate
  • 01:43:34 other messages with form fields it
  • 01:43:38 requires a bit of knowledge on angular
  • 01:43:40 forms concepts which I will not be
  • 01:43:42 covering here but the documentation is
  • 01:43:45 pretty clear so you should be in a good
  • 01:43:47 position all right that is about the
  • 01:43:51 input control wrapped inside a form
  • 01:43:54 field component in the next video let's
  • 01:43:56 take a look at the Select control
  • 01:44:03 in this video let's take a look at the
  • 01:44:06 material select component which is a
  • 01:44:08 form control for selecting a value from
  • 01:44:11 a set of options the first step is to
  • 01:44:15 import the module so in material Model
  • 01:44:18 Ts we're going to import mat select
  • 01:44:21 module and add it to the material array
  • 01:44:24 now we can create our first material
  • 01:44:27 select component the material select
  • 01:44:30 component just like the input component
  • 01:44:33 has to be wrapped inside the form field
  • 01:44:35 component some add form field now the
  • 01:44:39 component for a select control is map
  • 01:44:42 select within the select component we
  • 01:44:46 add a label using the mat label
  • 01:44:49 component the label is going to be topic
  • 01:44:54 every option for this select control is
  • 01:44:57 specified using the mat option component
  • 01:45:00 so mat option and let's create three of
  • 01:45:04 them each option will have the inner
  • 01:45:08 text which the user can see and a value
  • 01:45:12 which is sent to the server so we are
  • 01:45:15 going to have angular react and view all
  • 01:45:19 entitled case which can be seen in the
  • 01:45:22 browser and the same all in lower case
  • 01:45:26 as the corresponding value which will be
  • 01:45:28 sent to the server so mat option value
  • 01:45:32 is equal to angular value is equal to
  • 01:45:36 react and value is equal to view so we
  • 01:45:40 have the label and the three options and
  • 01:45:43 there is the small correction the label
  • 01:45:46 has to be outside the mat select
  • 01:45:48 component so the label goes inside mat
  • 01:45:52 form field if we save this and take a
  • 01:45:55 look at the browser you can see that we
  • 01:45:58 have a basic material select control the
  • 01:46:02 label is shown by default and when you
  • 01:46:05 select a value the label floats to the
  • 01:46:07 top now we have already discussed the
  • 01:46:11 features of the form field component
  • 01:46:13 about labels
  • 01:46:15 hence appearance and theming so I'm not
  • 01:46:19 going to demo them again in this video
  • 01:46:22 instead we're going to focus only on the
  • 01:46:25 Select component the first thing you
  • 01:46:27 might want to do is track the value of
  • 01:46:30 the select control and that can easily
  • 01:46:33 be done using two-way binding so back in
  • 01:46:37 vs code in the component class create a
  • 01:46:41 new property called selected value this
  • 01:46:45 is of type string next in the HTML we
  • 01:46:50 two-way bind to that property so on mat
  • 01:46:53 select we're going to add to a binding
  • 01:46:56 so banana in a box value is what we bind
  • 01:47:00 to this is going to be equal to selected
  • 01:47:04 value to view the value in the browser
  • 01:47:07 let's interpolate it now if we take a
  • 01:47:10 look at the browser we don't have a
  • 01:47:13 value displayed select a topic and its
  • 01:47:17 corresponding value is displayed the
  • 01:47:20 value displayed reflects the value
  • 01:47:22 attribute in the HTML
  • 01:47:25 sometimes you might want an option to
  • 01:47:28 clear out the selected value in such a
  • 01:47:31 scenario use an option with no value
  • 01:47:34 attribute so we are going to add another
  • 01:47:37 option Matt option and the text is going
  • 01:47:41 to be none and there is no value
  • 01:47:43 attribute so now if you go back to the
  • 01:47:45 browser select a value and the value is
  • 01:47:49 displayed select none and the value is
  • 01:47:53 reset the next feature possible with
  • 01:47:56 material select is grouping related
  • 01:47:59 options under a particular subheading
  • 01:48:01 and for that we make use of the material
  • 01:48:04 option group component so back in vs
  • 01:48:07 code I'm going to replace the existing
  • 01:48:10 options with a set of options that are
  • 01:48:14 saved in my clipboard so what we now
  • 01:48:16 have is Matt option for none and then we
  • 01:48:21 have Matt option group component with a
  • 01:48:24 particular label and this is the label
  • 01:48:26 that groups these three Matt option
  • 01:48:30 components so angular react view will be
  • 01:48:33 displayed under a label of web and
  • 01:48:36 similarly ionic and react native will be
  • 01:48:40 displayed under the category label of
  • 01:48:42 mobile if we save this and take a look
  • 01:48:46 at the browser you can see that we now
  • 01:48:49 have the topics grouped under sub
  • 01:48:51 heading we have none we have web which
  • 01:48:55 cannot be selected and then we have the
  • 01:48:57 options under web angular react and view
  • 01:49:00 similarly we have mobile which is the
  • 01:49:02 label that can't be selected and under
  • 01:49:05 mobile we have ionic and react native so
  • 01:49:09 that is about grouping together the
  • 01:49:11 options and it is also possible to
  • 01:49:14 although multiple selections all we have
  • 01:49:17 to do is add the multiple attribute on
  • 01:49:20 the select component so on Matt select
  • 01:49:22 add multiple now if you take a look at
  • 01:49:26 the browser the options turn into
  • 01:49:29 checkboxes and you can toggle selection
  • 01:49:32 on multiple options so we now have
  • 01:49:35 angular and react and the corresponding
  • 01:49:37 value is
  • 01:49:38 displayed all right those are some of
  • 01:49:42 the properties of angular materials
  • 01:49:44 select component and the reason I call
  • 01:49:48 the options line by line and not use an
  • 01:49:51 mg for directive is simply because ng 4
  • 01:49:55 is not an angular material concept I
  • 01:49:58 want to help you understand the
  • 01:50:00 possibilities with angular material and
  • 01:50:02 how you want to use it or improve it is
  • 01:50:05 completely up to you so in the next
  • 01:50:08 video let's take a look at autocomplete
  • 01:50:10 in angular material
  • 01:50:16 in this video let's take a look at
  • 01:50:18 autocomplete in angular material step
  • 01:50:22 one as always is to import the
  • 01:50:24 appropriate module say material dot
  • 01:50:27 module dot es we import Matt
  • 01:50:30 autocomplete module and add it to the
  • 01:50:34 material array now we can create our
  • 01:50:37 first order complete let's go back to
  • 01:50:40 the HTML and start off with a form tag
  • 01:50:45 within the form tag Matt formfield an
  • 01:50:49 input element type is equal to text and
  • 01:50:55 add the Matt input attribute if you save
  • 01:50:59 this and take a look at the browser we
  • 01:51:03 should have a basic input element the
  • 01:51:06 next step is to create a list of options
  • 01:51:09 the need to be displayed as autocomplete
  • 01:51:11 options so in the component class I'm
  • 01:51:15 going to add three options
  • 01:51:25 angular react and view the next step is
  • 01:51:29 to make use of the autocomplete
  • 01:51:32 component to display this list of
  • 01:51:34 options the component for autocomplete
  • 01:51:38 is matte autocomplete so right after the
  • 01:51:42 input element matte or a complete to
  • 01:51:48 specify the options we use the matte
  • 01:51:50 option component and to iterate over the
  • 01:51:56 list of options we will be using the mg4
  • 01:51:59 directive so on map option ng for is
  • 01:52:04 equal to
  • 01:52:07 let option of options we are also going
  • 01:52:11 to have property binding to value this
  • 01:52:14 is going to be equal to option which is
  • 01:52:18 from the current iteration and we are
  • 01:52:21 going to display the option so basically
  • 01:52:25 the value and what we display is going
  • 01:52:27 to be angular react or view all right
  • 01:52:32 now we have an input element and an
  • 01:52:34 autocomplete with options the final step
  • 01:52:38 is to link the two together on the order
  • 01:52:41 complete component we add a reference
  • 01:52:44 variable and assign to it Matt
  • 01:52:49 autocomplete on the input element we add
  • 01:52:54 the Matt order complete property and
  • 01:52:57 bind it with the reference variable so
  • 01:53:00 this is going to be equal to auto this
  • 01:53:05 right here if you now save the files and
  • 01:53:08 take a look at the browser I click on
  • 01:53:10 the input element and we get the list of
  • 01:53:13 options angular react and view click on
  • 01:53:17 an option and it fills the value for us
  • 01:53:21 so we have a basic autocomplete up and
  • 01:53:24 running now it's also quite possible
  • 01:53:27 that your list of options is not simply
  • 01:53:31 an area of strings instead it could very
  • 01:53:35 well be an area of objects for example
  • 01:53:38 an array of four objects which has key
  • 01:53:41 value pairs so copy-pasted a new array
  • 01:53:45 called object options which is an array
  • 01:53:48 of four objects each of the objects have
  • 01:53:52 name angular angular material react and
  • 01:53:55 view now to display the options
  • 01:53:59 correctly in the HTML we interpolate
  • 01:54:02 option
  • 01:54:03 dot name name is a property in each of
  • 01:54:07 these objects
  • 01:54:09 and of course make sure to iterate over
  • 01:54:12 object options now if we now save the
  • 01:54:17 file and take a look at the browser the
  • 01:54:20 options are displayed correctly but when
  • 01:54:23 you select an option the autocomplete
  • 01:54:26 doesn't display that value properly to
  • 01:54:31 let the autocomplete know that it has to
  • 01:54:33 use the name property to display as
  • 01:54:35 value you can specify a display function
  • 01:54:39 so back in the component class I'm going
  • 01:54:43 to define the display function display
  • 01:54:47 function the function gets each object
  • 01:54:49 as a parameter I'm going to call the
  • 01:54:52 parameter as subject and if at all there
  • 01:54:56 is a subject we return subject dot name
  • 01:55:00 else undefined now in the HTML on the
  • 01:55:07 autocomplete component we add the
  • 01:55:11 display width directive and assign the
  • 01:55:15 function
  • 01:55:17 if you now take a look at the browser
  • 01:55:20 the order complete works as expected
  • 01:55:23 the display value is angular but the
  • 01:55:26 selected value from the autocomplete
  • 01:55:27 would be the entire object now this is
  • 01:55:32 great but what you might be looking for
  • 01:55:35 is the filter autocomplete as you start
  • 01:55:38 typing in the text the options are
  • 01:55:41 narrowed down now this is where things
  • 01:55:44 start to get a little complicated to be
  • 01:55:48 able to implement a filtered or to
  • 01:55:50 complete you need to have a decent
  • 01:55:52 knowledge of angular forms angular forms
  • 01:55:56 is out of scope for this series but you
  • 01:55:59 can find the complete series on angular
  • 01:56:01 forms on my channel if you feel lost
  • 01:56:04 please go through that series and then
  • 01:56:06 try to understand how a filtered
  • 01:56:09 autocomplete works all right the first
  • 01:56:12 step is to import reactive forms module
  • 01:56:15 and add it to the imports array so in AB
  • 01:56:18 dot module dot ES import reactive forms
  • 01:56:23 module from angular slash forms and add
  • 01:56:28 it to the imports array
  • 01:56:32 step to create a form control and link
  • 01:56:35 it to the input element so in AB
  • 01:56:38 component or TS which is the class
  • 01:56:40 component we're going to import form
  • 01:56:44 control from angular slash forms and
  • 01:56:46 create a new form control so in the
  • 01:56:49 class my control is equal to new form
  • 01:56:54 control and on the input element form
  • 01:56:59 control is going to be equal to my
  • 01:57:03 control so we created the form control
  • 01:57:07 and linked it to the input element third
  • 01:57:10 step we use the help of rxjs to create a
  • 01:57:14 filtered list of options so nap
  • 01:57:17 component or TS begin by making the
  • 01:57:20 necessary imports we need observable
  • 01:57:23 from rxjs
  • 01:57:24 and map and start with operators from
  • 01:57:27 rxjs next we need a new property this is
  • 01:57:33 going to be filtered options this is
  • 01:57:37 going to be an observable of an array of
  • 01:57:40 strings next we need to implement the ng
  • 01:57:46 on in it
  • 01:57:47 lifecycle hook so from angular slash
  • 01:57:50 core we're going to import on in it an
  • 01:57:55 app component is going to implement
  • 01:57:59 on in it and we can now define the
  • 01:58:04 lifecycle hook so ng on in it and within
  • 01:58:08 this method we are going to have this
  • 01:58:11 dot filtered options equal to this dot
  • 01:58:16 my control dot value changes dot pipe
  • 01:58:23 start with anything and then map
  • 01:58:33 accepting the value this dot filter out
  • 01:58:38 the options based on the value then we
  • 01:58:44 can define the filter function so
  • 01:58:47 private filter is going to accept a
  • 01:58:50 value of type string and return an array
  • 01:58:55 of strings over here I'm going to have
  • 01:59:00 Const filter value is equal to value dot
  • 01:59:03 to lowercase and then return this dot
  • 01:59:10 options dot filter is going to accept an
  • 01:59:17 option and check if option dot to
  • 01:59:23 lowercase dot includes the filter value
  • 01:59:32 so what is happening here is that
  • 01:59:34 whenever the input value changes this
  • 01:59:39 code right here is called and in the
  • 01:59:43 filter method we accept the filter text
  • 01:59:47 and check if the option includes that
  • 01:59:50 filter text if it does it returns true
  • 01:59:54 and gets displayed if not the option is
  • 01:59:57 hidden in the order complete the final
  • 02:00:00 step is to iterate over this filtered
  • 02:00:03 options in the HTML with the async pipe
  • 02:00:06 so ng for let option of filtered options
  • 02:00:11 with the ACE
  • 02:00:12 pipe
  • 02:00:14 and of course this needs to be just
  • 02:00:17 option if we now take a look at the
  • 02:00:20 browser we should have a working filter
  • 02:00:23 autocomplete
  • 02:00:28 again if it seemed a bit hard to
  • 02:00:31 understand please to make sure you go
  • 02:00:33 through the concepts in angular and then
  • 02:00:35 revisit this video
  • 02:00:41 angular material checkboxes and radio
  • 02:00:43 buttons behave exactly the same as
  • 02:00:46 native checkboxes and radio buttons the
  • 02:00:49 only difference is the styling and
  • 02:00:52 animations that are part of the material
  • 02:00:54 library let's begin with checkboxes the
  • 02:00:59 first step is to import the module same
  • 02:01:01 material module Diaz import Matt
  • 02:01:05 checkbox module and add it to the
  • 02:01:07 material array now we can add a material
  • 02:01:12 checkbox in the HTML the component for a
  • 02:01:16 checkbox is Matt checkbox and the
  • 02:01:20 content between the tags is treated as
  • 02:01:23 the checkbox label if we save this and
  • 02:01:27 take a look at the browser you can see
  • 02:01:30 that we have a checkbox which behaves
  • 02:01:32 exactly like a regular checkbox but this
  • 02:01:35 time we have the addition of styling and
  • 02:01:38 animation by default the label is
  • 02:01:41 positioned to the right of the checkbox
  • 02:01:43 but we can position it to the left using
  • 02:01:46 the label position attribute so back in
  • 02:01:49 the HTML I'm going to duplicate this and
  • 02:01:53 set label position
  • 02:01:58 it's equal to before also going to add a
  • 02:02:03 break tag now save this and take a look
  • 02:02:07 at the browser and you can see that the
  • 02:02:09 label is on the left hand side also if
  • 02:02:13 you can notice by default the theme or
  • 02:02:16 color of check box is the accent color
  • 02:02:19 you can change it to primary or warn
  • 02:02:22 using the color attribute so I'm going
  • 02:02:25 to create two more checkboxes
  • 02:02:30 on the first one I'm going to set color
  • 02:02:32 is equal to primary and on the second
  • 02:02:36 one color is equal to warn now back in
  • 02:02:40 the browser you can see that the first
  • 02:02:42 two checkboxes have an accent team the
  • 02:02:45 third checkbox has a primary team and
  • 02:02:48 the last checkbox has a warranty and
  • 02:02:51 that is all there is to customize the
  • 02:02:54 check box in angular material native
  • 02:02:57 check box with styling and animations
  • 02:03:01 now let's take a look at angular
  • 02:03:03 material radio buttons again
  • 02:03:06 they're basically media radio buttons
  • 02:03:08 with material styling and animations as
  • 02:03:12 always the first step is to import the
  • 02:03:14 module so in material module tortillas
  • 02:03:17 we are going to import mat radio module
  • 02:03:20 and also add it to the material array
  • 02:03:24 now we can add radio buttons in the HTML
  • 02:03:28 there are two main components that we
  • 02:03:30 deal with radio group and radio button
  • 02:03:34 radio buttons are usually placed inside
  • 02:03:37 the radio group component so start off
  • 02:03:39 with matte radio group
  • 02:03:42 and within the radio group we add the
  • 02:03:45 radio buttons Matt radio button I'm
  • 02:03:49 going to make two more copies of this
  • 02:03:51 the first one value is going to be
  • 02:03:53 angular label is angular second one is
  • 02:04:00 react and finally view now if we save
  • 02:04:05 this and take a look at the browser you
  • 02:04:07 can see the three radio buttons angular
  • 02:04:09 react and view again by default the
  • 02:04:13 color of the radio button is set to
  • 02:04:15 accent color of the theme you can change
  • 02:04:18 it using the color attribute for the
  • 02:04:20 first radio button I'm going to add
  • 02:04:22 color is equal to primary and for the
  • 02:04:27 third button color is equal to warn now
  • 02:04:31 if we take a look at the browser the
  • 02:04:34 first one has a primary color the second
  • 02:04:36 one by default has an accent color and
  • 02:04:39 the third one has the warrant color
  • 02:04:42 alright that is pretty much about radio
  • 02:04:45 buttons in angular material now if you
  • 02:04:48 want to access the value of either the
  • 02:04:50 checkbox or the radio buttons you can do
  • 02:04:53 it with two-way binding make sure to
  • 02:04:55 import the forms module and use the
  • 02:04:57 banana in a boxing tags for two-way
  • 02:04:59 binding for a detailed explanation
  • 02:05:02 please go through the angular forms
  • 02:05:05 tutorial on my channel you will find
  • 02:05:07 everything there is to know about form
  • 02:05:10 controls in that series in the next
  • 02:05:13 video let's discuss about the date
  • 02:05:15 picker in angular material
  • 02:05:20 in this video let's take a look at the
  • 02:05:23 date picker component in angular
  • 02:05:25 material to start off in material dot
  • 02:05:28 module dot es we need to import Matt
  • 02:05:32 date picker module and Matt native date
  • 02:05:37 module from angular slash material after
  • 02:05:41 importing add them to the material array
  • 02:05:45 now we can create our first date picker
  • 02:05:49 a Deepika is basically composed of a
  • 02:05:53 text input and a calendar pop-up in the
  • 02:05:58 HTML we are going to start off with a
  • 02:06:00 form field so mat form field and within
  • 02:06:05 the form field component add an input
  • 02:06:07 element with math input attribute
  • 02:06:11 for this input element we are going to
  • 02:06:14 attach an icon which will open the
  • 02:06:17 calendar pop-up the component for the
  • 02:06:21 icon is Matt date picker toggle and we
  • 02:06:28 will add the Matt suffix attribute now
  • 02:06:33 that we have the input and a date picker
  • 02:06:35 toggle we now need the actual date
  • 02:06:38 picker component the component to use is
  • 02:06:41 Matt date picker and now the final step
  • 02:06:47 is to link all the three together on the
  • 02:06:51 date picker create a reference variable
  • 02:06:54 my date picker on the input element add
  • 02:06:59 the Matt date picker property and bind
  • 02:07:03 it with the reference variable my date
  • 02:07:07 picker finally on the date picker toggle
  • 02:07:12 add the fault property and bind to the
  • 02:07:17 reference variable again my date picker
  • 02:07:21 if we now save the files and take a look
  • 02:07:24 at the browser we should have an input
  • 02:07:28 element suffixed with an icon when you
  • 02:07:32 click on the icon a calendar pops up
  • 02:07:35 with today's date selected when you
  • 02:07:39 click on the date the value is saved to
  • 02:07:42 the input element you can also go back
  • 02:07:45 and forth between different months or
  • 02:07:50 also directly jump to a particular year
  • 02:07:55 you can even enter a date in the input
  • 02:07:58 element let's go with April 6th 2019 and
  • 02:08:06 you can see that the date is selected so
  • 02:08:10 this is a basic date picker in angular
  • 02:08:13 material now let's take a look at the
  • 02:08:16 different configurations possible for
  • 02:08:18 this date picker the first one is
  • 02:08:22 regarding the starting view of the
  • 02:08:24 calendar by default it will open the
  • 02:08:29 month view we can change it using the
  • 02:08:32 start view property so on the map date
  • 02:08:35 picker component start view and you can
  • 02:08:41 set this to year in which case it
  • 02:08:44 displays the months of the year for you
  • 02:08:47 can also set it to multi-year
  • 02:08:53 in which case it displays multiple years
  • 02:08:57 another typical requirement when working
  • 02:09:00 with date pickers is setting a minimum
  • 02:09:02 and maximum date that the user can
  • 02:09:05 select we can easily do that with the
  • 02:09:08 min and Max properties going to remove
  • 02:09:12 this start view property and in the
  • 02:09:16 component class I will create two date
  • 02:09:19 objects min date is today's date and Max
  • 02:09:24 date is 2019 3:10 the parameters are
  • 02:09:29 year month and date also please make a
  • 02:09:34 note that the month starts from 0 so we
  • 02:09:37 have the max date set to April 10th 2019
  • 02:09:42 now that we have the min and Max dates
  • 02:09:45 we can bind it to the input component on
  • 02:09:48 the min and Max properties so on an
  • 02:09:51 input element min is going to be equal
  • 02:09:55 to min date and Max is going to be equal
  • 02:10:02 to max date if you now take a look at
  • 02:10:05 the calendar
  • 02:10:08 you should be allowed to select dates
  • 02:10:10 starting from today's date till April
  • 02:10:13 10th you will not be able to select any
  • 02:10:17 other dates now another requirement
  • 02:10:21 sometimes is when you have to filter out
  • 02:10:23 certain dates for example let's say a
  • 02:10:26 user should not be able to pick
  • 02:10:28 Saturdays and Sundays you can do that
  • 02:10:32 while using the Matt day picker filter
  • 02:10:35 property of the date picker input so in
  • 02:10:38 the component class you will need to
  • 02:10:40 create a filter function date filter is
  • 02:10:44 going to accept date and then we are
  • 02:10:48 going to create Const day is equal to
  • 02:10:51 date dot get day to extract just the day
  • 02:10:56 and then we return day is not equal to
  • 02:11:00 zero and day is not equal to six we are
  • 02:11:08 basically preventing Saturdays and
  • 02:11:10 Sundays from being selected now in the
  • 02:11:13 HTML on the input element I'm going to
  • 02:11:16 remove min and Max and said Matt date
  • 02:11:22 picker filter is equal to our function
  • 02:11:27 date filter if we now go back to the
  • 02:11:30 calendar you can see that all the
  • 02:11:34 Saturdays and Sundays are disabled you
  • 02:11:37 can select only the weekdays
  • 02:11:40 all right that is pretty much the basics
  • 02:11:44 of date picker in angular material
  • 02:11:51 let's take a look at tool tips in this
  • 02:11:54 video to get started let's import the
  • 02:11:57 tool tip module so in material module
  • 02:12:00 Diaz import math tool tip module and add
  • 02:12:04 it to the material array next in the
  • 02:12:07 HTML let's create a simple button and
  • 02:12:10 then associate a tooltip with that
  • 02:12:12 button
  • 02:12:15 button the text is going to be hello we
  • 02:12:18 are going to add Matt rais'd
  • 02:12:20 button as an attribute for styling and
  • 02:12:23 then for the tooltip we add Matt tooltip
  • 02:12:28 this is going to be equal to welcome to
  • 02:12:32 code evolution if we save this and take
  • 02:12:35 a look at the browser you can see that
  • 02:12:38 when I hover on the button we get the
  • 02:12:41 tooltip welcome to code evolution and by
  • 02:12:45 default the position of the tool tip is
  • 02:12:47 to the bottom of the element that is
  • 02:12:50 below the element the position can be
  • 02:12:53 controlled using the Matt tooltip
  • 02:12:55 position attribute you can specify
  • 02:12:59 before/after above or below let's go
  • 02:13:04 with Matt tooltip position is equal to
  • 02:13:09 after if you save this and go back to
  • 02:13:14 the browser you can see that the tooltip
  • 02:13:17 is placed after the button element now
  • 02:13:21 if there is no space the tooltip is
  • 02:13:24 placed in the opposite direction for
  • 02:13:27 example if I specify above
  • 02:13:31 in the browser there is no room for the
  • 02:13:34 tooltip to be placed above so the
  • 02:13:36 tooltip is placed below and if I specify
  • 02:13:40 before there is no space to the left so
  • 02:13:45 it would be placed after which is to the
  • 02:13:48 right it is also possible to add delays
  • 02:13:52 for showing and hiding the tooltip
  • 02:13:54 sometimes the user might be just moving
  • 02:13:57 their Mouse around and you don't want
  • 02:13:59 the tooltip to pop up so adding a delay
  • 02:14:03 really helps in those situations we make
  • 02:14:06 use of show delay and hi delay
  • 02:14:09 attributes let's add a two-second delay
  • 02:14:12 Matt tooltip show delay is equal to 2
  • 02:14:17 seconds and Matt tooltip height delay is
  • 02:14:25 equal to 2 seconds now if you go back to
  • 02:14:30 the browser there should be a delay in
  • 02:14:32 the show and height of the tooltip so
  • 02:14:36 hover on the button 1 2 and it shows up
  • 02:14:39 move your mouse away 1 2 and it is
  • 02:14:43 hidden again typically a show delay of
  • 02:14:47 600 milliseconds should be good you
  • 02:14:51 wouldn't really need a high delay but
  • 02:14:53 again it completely depends on your
  • 02:14:55 requirement so that is about tooltips in
  • 02:15:00 angular material let's take a look at
  • 02:15:02 snack bar in the next video
  • 02:15:09 in this video let's take a look at snack
  • 02:15:11 bars and angular material snack bars are
  • 02:15:15 basically like notifications that inform
  • 02:15:18 users of some operation that has been
  • 02:15:20 performed they appear for a short
  • 02:15:23 duration at the bottom of the screen and
  • 02:15:26 they don't require user input to
  • 02:15:28 disappear and at any point in time only
  • 02:15:32 one snack bar notification may be
  • 02:15:34 displayed let's begin by importing the
  • 02:15:38 module so in material dot module dot es
  • 02:15:40 import mat snack bar module and added to
  • 02:15:45 the material array now in our HTML let's
  • 02:15:49 add a button that will open the snack
  • 02:15:51 bar so button add the mat button
  • 02:15:56 attribute and handle the click event on
  • 02:16:03 click we will call a method called
  • 02:16:05 open snack bar passing in a string item
  • 02:16:11 deleted as argument the button text is
  • 02:16:16 going to be show snack bar so we now
  • 02:16:21 have a button that called the open snack
  • 02:16:23 bar method let's go to the class
  • 02:16:25 component and define that method to open
  • 02:16:30 a snack bar we need to make use of a
  • 02:16:32 service and that service is mat snack
  • 02:16:36 bar from angular slash material so go
  • 02:16:39 ahead and import it and once you import
  • 02:16:42 it inject it in the constructor
  • 02:16:45 constructor private snack bar of type
  • 02:16:51 mat snack bar now we can define the open
  • 02:16:56 snack bar method which will actually
  • 02:16:58 open the snack bar so open snack bar
  • 02:17:02 accepts a message and within the body we
  • 02:17:06 use the service instance and call the
  • 02:17:09 open method passing in the message so
  • 02:17:12 the service instance is this dot snack
  • 02:17:15 bar and we call open passing in the
  • 02:17:20 such
  • 02:17:21 if we now save all the files and take a
  • 02:17:24 look at the browser we should have a
  • 02:17:26 button and when I click on the button
  • 02:17:28 the snack bar should pop up at the
  • 02:17:31 bottom of the screen with the message
  • 02:17:32 item deleted so we have a basic snack
  • 02:17:37 bar working as expected
  • 02:17:39 apart from the message we can also
  • 02:17:41 specify an action for a snack bar the
  • 02:17:45 action is specified as the second
  • 02:17:47 argument to the open method on the
  • 02:17:50 service instance to keep the open snack
  • 02:17:53 bar method more generic I will pass the
  • 02:17:56 action parameter as well from the click
  • 02:17:59 handler so in the HTML the second
  • 02:18:02 parameter is going to be the string
  • 02:18:03 dismiss in the component class the
  • 02:18:08 method will now take a second parameter
  • 02:18:10 which is action and the same is passed
  • 02:18:15 to the open method
  • 02:18:17 if you now take a look at the browser
  • 02:18:20 click on the button a snack bar opens
  • 02:18:23 and you can see the message item deleted
  • 02:18:25 and the action dismiss when I click on
  • 02:18:30 this action by default it closes the
  • 02:18:33 snack bar a typical use case for this
  • 02:18:36 type of snack bar is usually to undo an
  • 02:18:39 operation for example let me rename the
  • 02:18:44 button to delete
  • 02:18:48 and the action to undo but when the user
  • 02:18:54 does click on this action we want to
  • 02:18:57 execute some code that will undo the
  • 02:18:59 operation the way we are alerted when
  • 02:19:03 the snack bar is dismissed or the action
  • 02:19:06 is clicked is by using observables so in
  • 02:19:11 the component class we are going to
  • 02:19:13 start off by storing a reference to the
  • 02:19:16 snack bar that has been opened select
  • 02:19:21 snack bar F is equal to this dot snack
  • 02:19:25 bar dot open now using this reference we
  • 02:19:29 can subscribe to the after dismissed or
  • 02:19:33 on action observables so the first one
  • 02:19:38 is after dismissed it's a snack bar
  • 02:19:41 sorry
  • 02:19:42 snack bar F dot after dismissed dot
  • 02:19:46 subscribe and we are going to basically
  • 02:19:52 log the statement the snack bar
  • 02:19:56 was dismissed similarly we also have
  • 02:20:02 snack bar F dot on action dot subscribe
  • 02:20:09 and over here we are going to log the
  • 02:20:13 statement the slack bar action was
  • 02:20:17 triggered if we now go back to the
  • 02:20:21 browser and open dev tools click on the
  • 02:20:26 delete button and click on the action we
  • 02:20:31 can see the log statements in the
  • 02:20:33 console action was clicked and the snack
  • 02:20:37 bar was dismissed I just have console
  • 02:20:41 log statements but you can have the code
  • 02:20:43 to undo the deletion so we have the
  • 02:20:47 message and the action which are passed
  • 02:20:50 to the open method there is also a third
  • 02:20:53 parameter which accepts some
  • 02:20:56 configuration the one which would be
  • 02:20:59 used mostly is the duration property the
  • 02:21:02 Burien property indicates the length of
  • 02:21:05 time in milliseconds to wait before
  • 02:21:08 automatically dismissing the snack bar I
  • 02:21:11 will add an object with the property
  • 02:21:14 duration and set it to 2000 which is two
  • 02:21:18 seconds
  • 02:21:18 say comma and object duration set to two
  • 02:21:24 seconds if you now go back to the
  • 02:21:27 browser click on the button the snack
  • 02:21:32 bar pops up but
  • 02:21:34 after two seconds it automatically
  • 02:21:36 dismisses and in the console you can see
  • 02:21:39 the log statement so the after dismissed
  • 02:21:42 part of the code was executed when the
  • 02:21:47 snack bar was dismissed so when you have
  • 02:21:49 an action you can use the on action
  • 02:21:52 observable and when you don't have an
  • 02:21:54 action but want to execute some code
  • 02:21:56 when the snack bar is dismissed place
  • 02:21:59 that code and the after dismissed
  • 02:22:01 observable the last point to discuss is
  • 02:22:05 about the open from component method as
  • 02:22:08 the name indicates the open from
  • 02:22:11 component method creates and opens a
  • 02:22:14 snag bar with a custom component for the
  • 02:22:17 content let's take a look at an example
  • 02:22:20 in the existing component class which is
  • 02:22:23 AB component dot tias I'm going to
  • 02:22:26 quickly copy paste another component
  • 02:22:31 now you could create the component in a
  • 02:22:33 separate folder but for simplicity I
  • 02:22:36 have it right here as you can see the
  • 02:22:39 template is a span tag with color set to
  • 02:22:43 orange now in the app module I will add
  • 02:22:48 the component in the declarations array
  • 02:22:50 and add to another property called entry
  • 02:22:55 components
  • 02:23:00 all right now that we have a component
  • 02:23:02 to display as custom content let's add a
  • 02:23:06 button and a click handler to open the
  • 02:23:08 snack bar so in the HTML
  • 02:23:13 button mat button click handler is going
  • 02:23:19 to be open custom snag bar the text is
  • 02:23:23 going to be show custom snag bar and in
  • 02:23:27 the component class we're going to
  • 02:23:30 define open custom snack bar and this is
  • 02:23:37 basically going to be this dot snag bar
  • 02:23:40 dot open from component we pass in the
  • 02:23:44 custom component as its first argument
  • 02:23:47 and then we pass in duration of two
  • 02:23:53 seconds if you now go back to the
  • 02:23:56 browser and click on show custom snack
  • 02:24:00 bar we should have our orange colored
  • 02:24:03 notification custom snack bar
  • 02:24:11 alright guys in this video we are going
  • 02:24:14 to take a look at dialogues in angular
  • 02:24:16 material a dialogue is a type of modal
  • 02:24:19 window that appears in front of the app
  • 02:24:22 content to provide information or ask
  • 02:24:25 for information the usage of a dialog is
  • 02:24:30 very similar to that of the snack bar
  • 02:24:32 component we looked at in the last video
  • 02:24:35 so this video should be pretty
  • 02:24:37 straightforward if you've understood how
  • 02:24:39 a snack bar works alright let's get
  • 02:24:43 started first step import mat dialogue
  • 02:24:46 module
  • 02:24:49 and add it to the material array next in
  • 02:24:53 the HTML create a button that can open
  • 02:24:57 the dialogue so button add the attribute
  • 02:25:02 mat rais'd button add a click handler
  • 02:25:09 which is open dialogue and then the
  • 02:25:14 button text is going to be open dialogue
  • 02:25:18 now let's define the open dialogue
  • 02:25:21 method
  • 02:25:24 to be able to actually open the dialogue
  • 02:25:27 we need the Matt dialog service so
  • 02:25:30 import Matt dialog from angular slash
  • 02:25:33 material after importing we need to
  • 02:25:37 inject it
  • 02:25:38 so constructor let's go with public
  • 02:25:42 dialog of type Matt dialog and then we
  • 02:25:48 can define the open dialogue method
  • 02:25:51 within the body we are going to have
  • 02:25:54 this dot dialogue dot open and the open
  • 02:26:00 method on dialogue accepts two
  • 02:26:02 parameters the first parameter is a
  • 02:26:06 component and the second parameter is
  • 02:26:08 optional configuration to pass in a
  • 02:26:12 component parameter let's first create
  • 02:26:15 it so in the terminal we use angular CLI
  • 02:26:19 and run the command ng G for generate C
  • 02:26:25 for component and the name of the
  • 02:26:27 component which is going to be dialogue
  • 02:26:29 – example and I'm also going to skip the
  • 02:26:33 test files the command creates a folder
  • 02:26:37 for the component and adds it to the app
  • 02:26:40 module but a component that is used for
  • 02:26:43 a dialogue also has to be included in
  • 02:26:46 the entry components array so over here
  • 02:26:50 dialog example component now we can pass
  • 02:26:54 this component as our parameter so nav
  • 02:26:57 dot component es this dot dialogue dot
  • 02:27:00 open and the first parameter is going to
  • 02:27:04 be dialog example component
  • 02:27:07 all right let's go back to the browser
  • 02:27:09 and test this out if I click on the
  • 02:27:13 button a dialog pops up with the content
  • 02:27:17 dialog example works and this is the
  • 02:27:20 HTML corresponding to our dialog example
  • 02:27:24 component right now we just have a
  • 02:27:28 paragraph tag but there are several
  • 02:27:30 directives meant specifically to
  • 02:27:33 structure the dialogue content let's use
  • 02:27:36 them instead so envious code I'm going
  • 02:27:38 to open the file dialog example dot HTML
  • 02:27:42 and first we specify a dialogue title
  • 02:27:47 using the mat dialogue title directive
  • 02:27:50 so I'm going to add an h2 tag and the
  • 02:27:56 directive is going to be mad dialogue
  • 02:27:59 title this is going to be session
  • 02:28:04 timeout next for the content we have
  • 02:28:09 Matt dialogue content so this is going
  • 02:28:12 to be Matt dialogue content and the text
  • 02:28:16 is going to be you will be logged out
  • 02:28:20 due to inactivity next for the dialogue
  • 02:28:24 action we have the Matt dialogue actions
  • 02:28:28 let's create two buttons one to stay
  • 02:28:32 signed in and want to log out so keep me
  • 02:28:36 logged in or log out now on both these
  • 02:28:40 buttons if you want the click event to
  • 02:28:43 close the dialogue we need to add the
  • 02:28:45 Matt dialogue close directive so on both
  • 02:28:49 the buttons Matt dialogue close
  • 02:28:54 alright let's test this out if you go
  • 02:28:57 back to the browser and I click on the
  • 02:28:59 button we have the model with the title
  • 02:29:03 content and the buttons when I click the
  • 02:29:07 button it closes the dialogue as well
  • 02:29:11 and we have two buttons intended for
  • 02:29:14 different purposes how would we know
  • 02:29:17 whether to log the user out or keep them
  • 02:29:20 signed in when the dialog closes on the
  • 02:29:23 button click we can do that using the
  • 02:29:26 after closed observable which
  • 02:29:29 conveniently returns a result
  • 02:29:32 so back in vs code in the component
  • 02:29:34 class first create a reference to the
  • 02:29:38 dialog so let dialogue ref is going to
  • 02:29:42 be this dot dialogue dot open now we can
  • 02:29:47 subscribe to the observable dialogue ref
  • 02:29:50 dot after closed dot subscribe we get a
  • 02:29:57 result and let's simply log that to the
  • 02:30:01 console dialog result is result finally
  • 02:30:09 we assign a value to the mat dialogue
  • 02:30:11 closed directive which is accessed as
  • 02:30:14 the result so in the HTML for the
  • 02:30:17 dialogue on keep me logged in button mat
  • 02:30:22 dialogue close is going to be equal to
  • 02:30:28 true for the first case and false for
  • 02:30:33 logout let's go back to the browser and
  • 02:30:37 test this out I'm going to open the
  • 02:30:38 console click on open dialogue and click
  • 02:30:44 on keep me logged in you can see that it
  • 02:30:47 says dialogue result true and click on
  • 02:30:51 logout it says dialogue result false
  • 02:30:56 so in the subscription method you can
  • 02:30:58 have the code that checks for the result
  • 02:31:01 if result is equal to true keep them
  • 02:31:04 signed in and if result is equal to
  • 02:31:06 false love them out the final point to
  • 02:31:10 discuss with dialogues is passing in the
  • 02:31:13 data to the dialogue component and there
  • 02:31:16 are a couple of steps so let's go over
  • 02:31:19 each of them the first step specify the
  • 02:31:22 data as the second parameter to the
  • 02:31:25 dialogue open method so this is going to
  • 02:31:29 be an object the key is going to be data
  • 02:31:32 which in turn is going to be an object
  • 02:31:34 I'm going to pass a name called vishwas
  • 02:31:39 so this is the second argument to the
  • 02:31:43 open method next open the component
  • 02:31:46 class for the dialogue example component
  • 02:31:49 so dialogue example component dot TS to
  • 02:31:54 access the data in the dialogue
  • 02:31:56 component we have to use the mat
  • 02:31:59 dialogue data injection token so first
  • 02:32:03 import inject from angular slash core
  • 02:32:08 next import mat dialogue data from
  • 02:32:12 angular slash material and then we
  • 02:32:15 inject it in the constructor so
  • 02:32:18 constructor is going to be at inject and
  • 02:32:23 we are injecting mat dialogue data and
  • 02:32:28 then we say public data of type any so
  • 02:32:34 basically we are now making the dialogue
  • 02:32:36 component capable of receiving any type
  • 02:32:39 of data now in the dialogue component
  • 02:32:41 HTML we can simply interpolate the data
  • 02:32:45 object so in math dialogue content I'm
  • 02:32:48 going to add high data dot name if you
  • 02:32:54 now go back to the browser and click on
  • 02:32:57 open dialogue you can see that content
  • 02:33:00 says Huayra choise you will be logged
  • 02:33:02 out due to inactivity so we are able to
  • 02:33:06 pass data to the dialogue component
  • 02:33:10 now if you want to specify height and
  • 02:33:12 width for the dialogue it can be passed
  • 02:33:15 into the configuration object there are
  • 02:33:19 a bunch of properties you can use based
  • 02:33:21 on your requirement so I'll leave that
  • 02:33:24 for you guys to explore browse the API
  • 02:33:27 tab in the documentation and you will
  • 02:33:29 find everything you need alright I hope
  • 02:33:33 you now have a good understanding of how
  • 02:33:35 to work with dialogues in angular
  • 02:33:38 material
  • 02:33:42 all right in this video let's take a
  • 02:33:45 look at implementing a basic data table
  • 02:33:48 in angular material the first step as
  • 02:33:51 always is to import the module so in
  • 02:33:54 material dot module dot es import math
  • 02:33:58 table module and added to the material
  • 02:34:00 array
  • 02:34:03 now what we are going to do to save us
  • 02:34:06 some time is copy the code for a basic
  • 02:34:10 data table and then understand the
  • 02:34:12 different parts that are responsible for
  • 02:34:15 the functioning of a data table so in
  • 02:34:19 the material Doc's go to components and
  • 02:34:21 then to the data table section and click
  • 02:34:24 on the table link over here in the
  • 02:34:29 examples tab we have a basic data table
  • 02:34:32 now go to the second example which is
  • 02:34:35 basic use of math table and uses display
  • 02:34:38 flex and click on the code icon now
  • 02:34:43 let's copy paste the code first the HTML
  • 02:34:46 so copy and paste it an AB component dot
  • 02:34:53 HTML next the typescript file so go to
  • 02:34:58 TS copy the interface and the data in AB
  • 02:35:07 component TS paste it right after the
  • 02:35:10 import statement then go back to the
  • 02:35:15 documentation and copy the two lines of
  • 02:35:18 code from the component class go back to
  • 02:35:22 BS code and in app component paste them
  • 02:35:27 finally copy the CSS so over here CSS
  • 02:35:32 and then copy this and paste it in AB
  • 02:35:36 component dot CSS now if we save all the
  • 02:35:42 files and take a look at the browser you
  • 02:35:46 should be able to see a data table now
  • 02:35:49 let's understand the different parts
  • 02:35:51 that make up this data table the first
  • 02:35:55 part to implementing a data table is the
  • 02:35:59 data source every data table needs a
  • 02:36:02 data source that contains the data to be
  • 02:36:05 displayed in our example we have the
  • 02:36:08 data of periodic elements we have an
  • 02:36:12 interface that defines the type of
  • 02:36:16 each element so a periodic element will
  • 02:36:19 have a name position weight and symbol
  • 02:36:23 right below the interface is where you
  • 02:36:26 see the array of periodic elements we
  • 02:36:29 have ten elements each having properties
  • 02:36:31 mentioned in the interface what you have
  • 02:36:35 to notice here is that the interface and
  • 02:36:37 the data array is declared outside the
  • 02:36:39 component to be able to use it in the
  • 02:36:42 component we need to create a property
  • 02:36:44 and initialize it for that purpose we
  • 02:36:48 have data source which is initialized to
  • 02:36:50 element data this array right here
  • 02:36:55 alright the next thing to do is to
  • 02:36:58 provide this data source to the data
  • 02:37:01 table and we do that in the HTML so an
  • 02:37:05 app dot component dot HTML we create a
  • 02:37:09 data table with mat table component and
  • 02:37:12 to provide the data source we make use
  • 02:37:15 of the data source attribute we use
  • 02:37:18 property binding to bind the property
  • 02:37:21 defined in the component class so data
  • 02:37:25 source is equal to element data which is
  • 02:37:28 provided here so that is the first step
  • 02:37:32 to implementing a data table creating
  • 02:37:35 the data source and binding it to the
  • 02:37:38 table the second step is to define the
  • 02:37:42 column templates in the browser you can
  • 02:37:47 see that we have four columns the
  • 02:37:50 position number name weight and symbol
  • 02:37:54 in the code we define the four columns
  • 02:37:57 each inside its own NG container element
  • 02:38:01 physician named weight and symbol the ng
  • 02:38:08 container element will not be rendered
  • 02:38:11 to the Dom but it will provide an
  • 02:38:13 element for applying this mat column
  • 02:38:17 death directive the mat column death
  • 02:38:20 directive is what uniquely identifies a
  • 02:38:24 given column with a key position name we
  • 02:38:30 and symbol inside the ng container
  • 02:38:34 element we will have all the
  • 02:38:36 configuration for a given column you can
  • 02:38:40 see that we have the template that
  • 02:38:42 defines how to display the header for a
  • 02:38:44 given column identified using the map
  • 02:38:47 header cell death structural directive
  • 02:38:50 we also have another template that
  • 02:38:53 defines how to display the data cells of
  • 02:38:55 a given column using the mat cell def
  • 02:38:59 structural directive the to structural
  • 02:39:02 directives do not attach any styling to
  • 02:39:05 the elements the styling is taken care
  • 02:39:07 of by mat header cell and mat cell
  • 02:39:12 components next let's talk about the
  • 02:39:16 content of the heading and the data
  • 02:39:18 cells for the heading you can see that
  • 02:39:21 we just have static text number name
  • 02:39:25 weight and symbol but for the data cell
  • 02:39:30 we get access to each row of the data
  • 02:39:33 source we obtain a reference to each row
  • 02:39:37 and then access the different properties
  • 02:39:40 of each row we then use interpolation to
  • 02:39:44 bind the data to the view so in our data
  • 02:39:47 source we have ten rows we iterate
  • 02:39:50 through the rows get a reference to each
  • 02:39:53 row and store it in the element variable
  • 02:39:56 and then we access the appropriate
  • 02:39:59 property in the column template so
  • 02:40:01 element dot position dot name dot weight
  • 02:40:04 in dot symbol these are the different
  • 02:40:07 properties for each element
  • 02:40:11 all right now what we have done so far
  • 02:40:14 is just define the column template how
  • 02:40:17 it's supposed to look the final step is
  • 02:40:20 to define the rows in the data table and
  • 02:40:23 for that we make use of two more
  • 02:40:26 components to define the table header
  • 02:40:29 row we make use of the mat header row
  • 02:40:32 component and to determine which columns
  • 02:40:36 have to be displayed in the table mat
  • 02:40:39 header row death structural directive is
  • 02:40:41 used to this we assign displayed columns
  • 02:40:45 property which is an array of columns we
  • 02:40:49 have mentioned in the component class so
  • 02:40:52 display columns is an array of strings
  • 02:40:54 with positioned name weight and symbol
  • 02:41:00 similarly to display the data rows we
  • 02:41:03 make use of the mat row component now
  • 02:41:07 with math burrow death structural
  • 02:41:09 directive we also have a variable
  • 02:41:12 exported that we have named as row
  • 02:41:15 containing the data of that given row
  • 02:41:18 and we have to specify the columns
  • 02:41:21 property which contains the order in
  • 02:41:24 which the data cells should be rendered
  • 02:41:26 again this is displayed columns property
  • 02:41:30 so when you run this code we should have
  • 02:41:34 the data table working as expected
  • 02:41:36 position name weight and symbol and then
  • 02:41:40 the different rows corresponding to each
  • 02:41:42 entry or each item and the element array
  • 02:41:46 so to summarize there are three steps in
  • 02:41:49 implementing a data table in angular
  • 02:41:52 material first up define the data source
  • 02:41:55 and the columns to be displayed
  • 02:41:58 second step define the column templates
  • 02:42:01 and finally the third step include the
  • 02:42:04 header and the row definitions so we are
  • 02:42:08 able to create a very basic data table
  • 02:42:11 we copy pasted the code and did not
  • 02:42:13 really code anything as such so in the
  • 02:42:16 next video let's also try to make some
  • 02:42:19 changes and see how that impacts the
  • 02:42:22 data table that will give you guys a
  • 02:42:24 much better idea of how the data table
  • 02:42:27 works
  • 02:42:31 in this video let's take a more detailed
  • 02:42:34 look at data tables in angular material
  • 02:42:38 let's start with the displayed columns
  • 02:42:41 property this property as the name
  • 02:42:45 suggests controls the columns to be
  • 02:42:47 displayed in the browser as you can see
  • 02:42:50 it is just an array of strings if I were
  • 02:42:54 to for example remove symbol from this
  • 02:42:57 list
  • 02:42:59 take a look at the browser the column is
  • 02:43:03 not displayed so the property controls
  • 02:43:07 which of the columns have to be shown
  • 02:43:10 but there is more to it than just
  • 02:43:13 showing and hiding of columns the order
  • 02:43:16 in which you specify the fields to be
  • 02:43:19 displayed is the order in which the
  • 02:43:21 columns are displayed in the browser you
  • 02:43:24 can see that we have the order as
  • 02:43:26 position name weight and symbol and in
  • 02:43:31 the browser the columns are in the exact
  • 02:43:35 same order physician name weight and
  • 02:43:39 symbol if you want the weight column to
  • 02:43:43 be the last column you just have to
  • 02:43:45 specify the weight column as the last
  • 02:43:48 column in displayed columns property so
  • 02:43:51 I'm going to cut this out
  • 02:43:55 and paste it after symbol if I now go
  • 02:43:59 back to the browser
  • 02:44:01 weight is displayed as the last column
  • 02:44:04 which now brings me to the HTML to
  • 02:44:08 highlight another point the order in
  • 02:44:11 which you specify these column templates
  • 02:44:13 with the ng container tag doesn't affect
  • 02:44:17 the order in any way whatsoever the
  • 02:44:20 order is controlled by the displayed
  • 02:44:22 columns property which is specified to
  • 02:44:25 the mat header row and mat row
  • 02:44:28 components but orders matter with the
  • 02:44:32 container column template is the mat
  • 02:44:35 column definition attribute the value
  • 02:44:38 has to be a value from the displayed
  • 02:44:41 columns property if I've already changed
  • 02:44:44 position to let's say position test same
  • 02:44:49 and take a look at the browser you can
  • 02:44:52 see that the code breaks and the data
  • 02:44:54 table is not displayed so make sure you
  • 02:44:58 specify the right column name to the
  • 02:45:00 template next let's talk about the mat
  • 02:45:04 row component you can see that we have
  • 02:45:07 two variables declared row and columns
  • 02:45:10 the columns property is set to displayed
  • 02:45:14 columns to indicate what data has to be
  • 02:45:17 displayed let's change this and see what
  • 02:45:20 happens so in the class component I'm
  • 02:45:22 going to create another property called
  • 02:45:26 displayed columns data and in this list
  • 02:45:31 I'm going to remove weight also back in
  • 02:45:35 the HTML I'm going to set columns to
  • 02:45:38 display columns data if you now take a
  • 02:45:42 look at the browser you can see that we
  • 02:45:45 have only three columns of data being
  • 02:45:47 displayed and four columns of header the
  • 02:45:51 data for the weight column is hidden so
  • 02:45:55 it is very much possible to set separate
  • 02:45:57 columns to be displayed for the header
  • 02:46:00 and the data but then again not sure if
  • 02:46:04 you would ever want to do that next
  • 02:46:06 let's talk about the road
  • 02:46:08 raishin what this helps us with is to
  • 02:46:13 get hold of the raw data to handle
  • 02:46:15 events on each row in the data table for
  • 02:46:19 example I can add a click event binding
  • 02:46:24 and call a method that provides us with
  • 02:46:27 the raw data let's call this log data
  • 02:46:30 and pass in that row variable now in the
  • 02:46:35 component class we can quickly define
  • 02:46:39 log data accepts a row and let's just
  • 02:46:43 console.log it if I save the files and
  • 02:46:47 take a look at the browser open console
  • 02:46:51 and click on a row you can see the
  • 02:46:55 corresponding row data being logged in
  • 02:46:58 the console so if you have any action
  • 02:47:01 that has to be performed for example
  • 02:47:03 editing deleting or navigating to a
  • 02:47:07 different route pasted on this row data
  • 02:47:10 this is the way to go
  • 02:47:12 fasten the data extract the ID probably
  • 02:47:16 of that column and perform the necessary
  • 02:47:19 action all right then I hope that now
  • 02:47:23 you have a much better understanding of
  • 02:47:25 how a data table works in angular
  • 02:47:27 material next let's take a look at
  • 02:47:30 filtering sorting and pagination in data
  • 02:47:34 tables
  • 02:47:39 features like filtering salting and
  • 02:47:42 pagination have been made really simple
  • 02:47:44 in angular material let's take a look at
  • 02:47:47 filtering in this video sorting and
  • 02:47:50 pagination in subsequent videos
  • 02:47:53 filtering can be achieved in three
  • 02:47:55 simple steps the first step is to create
  • 02:47:59 a data source as an instance of the mat
  • 02:48:02 table data source class so let's begin
  • 02:48:06 by importing mat table data source from
  • 02:48:09 angular material next we create a data
  • 02:48:13 source property as an instance of this
  • 02:48:16 imported class so data source is going
  • 02:48:20 to be new mat table data source and then
  • 02:48:26 we pass in element data as the argument
  • 02:48:29 so that is our first step creating the
  • 02:48:32 data source as an instance of the mat
  • 02:48:35 table data source class second step is
  • 02:48:39 to create an input field where the user
  • 02:48:41 can enter the filter text let's add that
  • 02:48:45 code in the HTML mat form field then an
  • 02:48:49 input element we add the mat input
  • 02:48:54 attribute and also a placeholder that
  • 02:48:57 says filter every time the user enters
  • 02:49:02 some text we need to filter the data
  • 02:49:04 table for that we listen to the key up
  • 02:49:07 event
  • 02:49:10 so key up and on key up we are going to
  • 02:49:13 call a method called apply filter and to
  • 02:49:18 this method we pass in the filter text
  • 02:49:21 which is accessed using dollar event dot
  • 02:49:26 target dot value that is the second step
  • 02:49:31 creating a filter input the final step
  • 02:49:35 is to define this apply filter method
  • 02:49:37 which actually filters the data source
  • 02:49:40 so back in the component class apply
  • 02:49:44 filter accepts the filtered text of type
  • 02:49:50 string and within the method all we have
  • 02:49:53 to do is assign the filter text value to
  • 02:49:57 the filter property of the data source
  • 02:50:00 so this dot data source dot filter is
  • 02:50:05 equal to filter value dot trim dot to
  • 02:50:11 lowercase now this kind of seems like
  • 02:50:15 magic but let me tell you how it works
  • 02:50:18 remember the math table data source
  • 02:50:21 class that we imported well that class
  • 02:50:24 has a property called filter when you
  • 02:50:28 want to filter out the data all you have
  • 02:50:31 to do is assign a string to that
  • 02:50:33 property when you assign the filter
  • 02:50:36 value the data source will reduce each
  • 02:50:39 row to a serialized form and will filter
  • 02:50:43 out the row if it does not contain that
  • 02:50:45 filtered value or to put it in simpler
  • 02:50:48 terms does the data rope contain the
  • 02:50:51 filter if yes only then display the row
  • 02:50:54 so if we take a look at the browser you
  • 02:50:58 can see that we have a filter input I
  • 02:51:00 type H and you can see it filters the
  • 02:51:04 elements type H E and it filters further
  • 02:51:07 I can also filter on numeric values type
  • 02:51:12 6 and you can see it filters out the
  • 02:51:14 rows that don't contain the number 6 so
  • 02:51:19 three basic steps for filtering creating
  • 02:51:22 the data source as an
  • 02:51:24 instance of math table datasource
  • 02:51:26 creating the input filter and finally on
  • 02:51:30 cube of that input element assign the
  • 02:51:33 filter value to the filter property of
  • 02:51:35 the data source alright in the next
  • 02:51:38 video let's take a look at sorting in
  • 02:51:40 data tables
  • 02:51:46 in this video let's take a look at
  • 02:51:49 sorting in data tables just like
  • 02:51:52 filtering angular material makes it
  • 02:51:54 really simple to implement the sorting
  • 02:51:57 feature for your data table now there
  • 02:52:00 are three simple steps the first step is
  • 02:52:02 to import the material sorting module so
  • 02:52:06 in material dot module tortillas we are
  • 02:52:08 going to import matte salt module and
  • 02:52:11 add it to the material array
  • 02:52:15 second step we need to add directives to
  • 02:52:18 the material table in the HTML so on the
  • 02:52:22 mat table itself we need to add the mat
  • 02:52:26 salt directive and to each column header
  • 02:52:31 cell that should trigger sorting we need
  • 02:52:34 to add the mat sort header directive
  • 02:52:37 let's add it to the first three columns
  • 02:52:39 so on mat header cell mat sort header
  • 02:52:46 and I'm going to add it to the next two
  • 02:52:48 columns as well so on mat header cell
  • 02:52:51 mat sort header and the same again the
  • 02:52:56 final step is to provide the mats our
  • 02:52:58 directive to the datasource so in the
  • 02:53:01 types of file import mat sort from
  • 02:53:05 angular slash material next we use the
  • 02:53:09 view child decorator to get hold of a
  • 02:53:12 reference to the mat sort component so
  • 02:53:15 first import view child from angular
  • 02:53:18 slash core and then in the component
  • 02:53:21 class at view child mat sort sort of
  • 02:53:27 type mat salt and finally in the ng on
  • 02:53:32 init method we assigned the mat sort
  • 02:53:35 component to the sort property of the
  • 02:53:38 data table so import on in it from
  • 02:53:41 angular slash core app component
  • 02:53:44 implements on in it and then we define
  • 02:53:50 ng on in it this dot datasource dot sort
  • 02:53:56 is equal to this dot sort and that is
  • 02:54:01 pretty much it let's save the files and
  • 02:54:03 take a look at the browser now when I
  • 02:54:07 hover on the column header you can see
  • 02:54:09 an arrow mark when I click on the header
  • 02:54:12 the elements are sorted in ascending
  • 02:54:15 order click on the header again the
  • 02:54:19 elements are sorted in descending order
  • 02:54:21 click again and the sorting is removed
  • 02:54:27 similarly you can also saw
  • 02:54:29 on name and weight ascending descending
  • 02:54:34 and no salt the symbol column on the
  • 02:54:39 other hand is not sortable that is
  • 02:54:42 because we did not attach the Matt salt
  • 02:54:45 header directive to this column so there
  • 02:54:48 you go
  • 02:54:49 sorting data table in three simple steps
  • 02:54:51 include the Matt sort module add the
  • 02:54:55 directives in the HTML mats or header
  • 02:54:58 and Matt sword and finally assign the
  • 02:55:02 Matt sort component to the sword
  • 02:55:04 probability of the data source in the
  • 02:55:07 next video let's take a look at
  • 02:55:09 pagination
  • 02:55:14 in this video let's take a look at
  • 02:55:16 pagination in data tables similarity
  • 02:55:20 sorting pagination can be implemented in
  • 02:55:22 three simple steps the first step is to
  • 02:55:25 import the material Pigeon ater module
  • 02:55:28 so in material module Diaz import map
  • 02:55:34 pigeon ater module and add it to the
  • 02:55:36 material array second step we add the
  • 02:55:40 paginated component in the HTML so after
  • 02:55:45 Matt table map pigeon ater and we are
  • 02:55:50 going to specify two options to the page
  • 02:55:52 inator the first one is the page size we
  • 02:55:56 specify that using the page size options
  • 02:55:59 property
  • 02:56:02 let's go with 5 10 and 20 the second
  • 02:56:07 option is to show the first and last
  • 02:56:10 buttons of the page inator show first
  • 02:56:16 last buttons and we simply include it as
  • 02:56:19 an attribute the final step is to
  • 02:56:22 provide the map paginated directive to
  • 02:56:25 the data source so in the types of file
  • 02:56:28 import mat pigeon eighter from angular
  • 02:56:32 slash material and then use the view
  • 02:56:36 child decorator to get hold of a
  • 02:56:38 reference to the map page inator
  • 02:56:40 component add view child mat regginator
  • 02:56:46 the variable is going to be pigeon ATAR
  • 02:56:49 of type map page inator finally in the
  • 02:56:55 ng on init method we assign the mat
  • 02:57:00 paginated component to the paginated
  • 02:57:02 property of the datasource so this dot
  • 02:57:05 datasource dot originator is equal to
  • 02:57:10 this dot page inator and that is it
  • 02:57:14 let's save the files and take a look at
  • 02:57:15 the browser at first glance you can see
  • 02:57:19 that the styling is sort of broken so
  • 02:57:22 let's fix that in the HTML we are going
  • 02:57:25 to wrap the table
  • 02:57:28 as well as pigeon eater in a div tag and
  • 02:57:33 then we are going to move this elevation
  • 02:57:37 class from math table to the div tag now
  • 02:57:42 if you go back to the browser you can
  • 02:57:44 see that it looks much better by default
  • 02:57:48 five items are displayed per page you
  • 02:57:50 can change it to ten or even twenty you
  • 02:57:55 can also go back and forth between the
  • 02:57:57 pages using the icon buttons the first
  • 02:58:01 page and last page buttons might not be
  • 02:58:04 necessary for small data sets but if you
  • 02:58:07 have several hundreds of rows with a
  • 02:58:09 small page size you can definitely
  • 02:58:12 include the show first and last buttons
  • 02:58:15 attribute
  • 02:58:21 welcome back everyone in this video
  • 02:58:24 let's take a look at virtual scrolling
  • 02:58:26 with angular cdk sometimes you might
  • 02:58:30 have to display hundreds or thousands of
  • 02:58:32 elements which can be slow in any
  • 02:58:34 browser virtual scrolling will help you
  • 02:58:37 in such situations with virtual
  • 02:58:40 scrolling you can display large lists of
  • 02:58:43 elements performant ly by only rendering
  • 02:58:46 the items that fit on the screen let's
  • 02:58:50 see how that can be done in this video
  • 02:58:52 the first step we need to import the
  • 02:58:55 scrolling module from angular cdk so in
  • 02:58:59 AB dot module dot es import scrolling
  • 02:59:03 module from angular slash CD k slash
  • 02:59:06 scrolling next add it to the imports
  • 02:59:09 array so scrolling module added to the
  • 02:59:12 imports array now for the second step we
  • 02:59:17 are going to create an array of a
  • 02:59:19 thousand numbers so in the component
  • 02:59:22 class which is AB dot component or TS
  • 02:59:24 file I'm going to create a new property
  • 02:59:27 numbers which is going to be an array
  • 02:59:31 then in the constructor for that I
  • 02:59:36 equals 0 I less than thousand I plus
  • 02:59:41 plus this dot numbers dot push I all
  • 02:59:49 right
  • 02:59:49 now that we have a huge list of numbers
  • 02:59:51 let's render them in the HTML I will
  • 02:59:55 first render them with the ng4 directive
  • 02:59:58 and then show you how it works with
  • 03:00:01 virtual scrolling then the HTML add a
  • 03:00:04 div tag and then add the mg4 directive
  • 03:00:09 and v4 is equal to let number of numbers
  • 03:00:14 and then we simply render the number I'm
  • 03:00:19 also going to add a bit of styling to
  • 03:00:20 this div tag so open up and add a class
  • 03:00:26 called number with display flex justify
  • 03:00:32 content center-aligned
  • 03:00:34 items center let's go with a border to
  • 03:00:40 pixels solid maroon and then box-sizing
  • 03:00:47 border box and back in the HTML I'm
  • 03:00:51 going to add the class number alright if
  • 03:00:56 we now save the file and take a look at
  • 03:00:58 the browser you should be able to see
  • 03:01:01 all the list of numbers what I want to
  • 03:01:05 focus on though is the Dom itself if I
  • 03:01:08 open dev tools you can see that all of
  • 03:01:12 the thousand elements are present in the
  • 03:01:15 Dom tree so this is the list with ng for
  • 03:01:19 directive now let's implement the list
  • 03:01:22 with virtual scrolling back in the HTML
  • 03:01:26 the first thing we have to do is create
  • 03:01:29 a viewport for the virtual scroll the
  • 03:01:33 component is cdk virtual scroll view
  • 03:01:37 port on this viewport we have to define
  • 03:01:41 the item size attribute and this is
  • 03:01:44 basically an indication of the size of
  • 03:01:47 each element I have specified item size
  • 03:01:50 as 100 so in the number class as well
  • 03:01:53 let's add height is equal to hundred
  • 03:01:58 next we need to specify a height for the
  • 03:02:02 viewport itself and for that I'm going
  • 03:02:04 to create a CSS class this is going to
  • 03:02:07 be called container and I'm going to set
  • 03:02:10 the height property to 400 pixels and
  • 03:02:13 back in the HTML on the viewport plus is
  • 03:02:19 equal to container now each element is a
  • 03:02:23 hundred pixels tall and the viewport is
  • 03:02:26 400 pixels tall so we should be able to
  • 03:02:29 see four elements at any given time back
  • 03:02:33 in the HTML I'm going to move this div
  • 03:02:35 tag within the viewport now for the
  • 03:02:39 actual list of numbers we do the same as
  • 03:02:41 what we did before with ng for the only
  • 03:02:45 difference now is that we are going to
  • 03:02:47 use
  • 03:02:48 cdk virtual fault instead of ng4 so CDK
  • 03:02:53 virtual for this is the directive you
  • 03:02:56 have to make use of inside a virtual
  • 03:02:58 scrolling container and that is pretty
  • 03:03:02 much it
  • 03:03:03 if you now save the files and go back to
  • 03:03:04 the browser we should only be seen four
  • 03:03:08 elements at a time and as we scroll down
  • 03:03:11 we can see the rest of the elements but
  • 03:03:14 what is important though is observing
  • 03:03:16 the Dom tree you can see that instead of
  • 03:03:19 rendering all the thousand elements we
  • 03:03:23 are now rendering only a handful of them
  • 03:03:25 as you scroll the Dom nodes update to
  • 03:03:28 reflect the numbers being displayed so
  • 03:03:32 this way we can implement a more
  • 03:03:34 performant list to display items all
  • 03:03:37 right with that we come to the end of
  • 03:03:39 this angular material series I hope you
  • 03:03:43 are now in a better position to start
  • 03:03:45 using some of the material components in
  • 03:03:46 your own projects