Angular 9 Fundamentals Adding Angular Material

[00:00:00]
>> So one of the big things that I use modules for is, if you're looking like angular material, so I'm just going to Google this. Is every one of the angular material components is essentially broken up into its own module. And the reason being is that, if all you need is like autocomplete, well, you don't need to import all the angular material.

[00:00:28] And so what they've done is they have broken this up so that you can just import the stuff that you need. Well, if you do the root level module, it starts to get very, very large. And so what I do is when, in an application I'm using angular material, which is probably 9.9 times out of 10, is I create a standalone material module.

[00:01:01] And so what I do is I just import all the material modules. And then I just export it to the rest of the application so that it is available. And so if you go to the angular material website, and you can look at the samples, there's just like this checkbox here, and it'll send you out to a StackBlitz.

[00:01:20] And so StackBlitz is pretty phenomenal. They got a ton of really good working examples. And so sometimes if I just want to play around with something, I'll just do it right in the StackBlitz. But you'll notice here, and I apologize this is very, very small. I think I can probably bump this up a bit.

[00:01:44] Is if I go over here, right in the app, there's a material-module.ts. And I'll bump this back down just a bit. And if you look here, there's this huge, huge, Basically list of all the modules. And so what I do is I just come in here, I'll just copy this, and we'll go here.

[00:02:18] And, Let me try something. If I go ng g m for module material -d for dry run. So I'm trying to do this off the top of my head, but see what happens. All right, so you can see here, it generated this module. It's putting it in a material folder, I'm not gonna do that, but you could put it there.

[00:02:47] What I'll do is I'm just going to come in here and in the app, new file, and I'm gonna go just material.module.ts. And I'm not gonna paste that in. What I am gonna do is go back to my StackBlitz, I don't know how I lost that. Copy, let's hop back into VS code, and I'm gonna paste this in.

[00:03:15] And I'm going to call this MaterialModule. And so now, what I'm doing is I'm just importing all of these individual components, and then I'm exporting them. And so I'm basically creating a barrel roll. I'm saying roll these all up and make them available to the rest of your application.

[00:03:36] And so now, if I go to app module, what I can do is in the imports, I can now import MaterialModule. And what this does is it now makes every single material component available to the rest of my application. And I don't have to go and import that over and over and over, is I'll important in the components themselves.

[00:04:02] But this is a good example of, I really wanna organize this group of dependencies into a single place, and make it available to my application. And so this is a really nice way to essentially group things up into a module. And then now if I went into like ItemsComponent, or any of these components, I can now start to add in these material components without having to import them one by one into the main module.

[00:04:36] Another thing that I do, admittedly, is because I think it's impossible to memorize an entire SDK. Let me just pull one here. And so I typically have this on speed dial. I use cards a lot, and we will actually see this in place. So now what I can do is we just use mat card.

[00:05:08] And so this is actually a really good segway to let me go to, In the appcomponent.html, there's a lot of stuff happening here. So I'm gonna just delete that, sorry. Starter project, you're out here. You'll notice that as I start to type, in my code here, I'm starting to get these kind of like autocomplete things.

[00:05:41] So I don't know why they didn't complete, it should have. But if I go here, there we go. I don't want to mark our actions but we'll do mat-card here. Hello! So let me save this. Let's go back here. Let's refresh this. Let me make sure this is still running.

[00:06:08] I might have actually stuffed this, No, there we go. So we're gonna let this compile real quick. So kind of this first pass, it has built out these modules so it doesn't have to do it again. So it's just optimizing the build and then we will see this working.

[00:06:29] So definitely if you feel like I've kind of glossed over something, and you want to see it, I welcome that. Like, hey you showed how to get material components in but you didn't actually show us how to use one. And so we're letting this build here. And this is, kind of, we're putting everything in, at once, just for convenience sake.

[00:06:53] But again, if you're doing something for production, what I do is I go through and I prune out what I'm not using. So we'll give this just a moment, and while that's building, what I will do is let's just hop back here. The one other piece that I wanna call out since we're talking about material components is, you'll notice here if you go to the angular material site, there are these components on.

[00:07:27] Or you have the components page and has all these components that are available to use and there's a bunch of them. It's really good. But what you also have is if you go up here, there is the CDK. And so the component dev kit, what they've done is they noticed that across these components, there was a lot of functionality that was being reused.

[00:07:53] And so they separated out material components, where that functioned out into a component development kit from the components themselves. And so what this does is, it gives you for instance accessibility, clipboard drag and drop which I've used quite a bit. So pretty easy, so there's also just, again is a convenience when we talk about angular being a batteries kind of included framework is angular material is part of angular, the cdk is part of angular.

[00:08:29] And you have all these things here that you can kind of just get for free, you just have to add it. And so for instance, break points and stuff. And so we're not going to get into those step by exhaustively, but I do want to surface like you have all these components that you click through.

[00:08:49] Where actually when we get to forms we'll talk about definitely input for sure. And it's really easy to just come in, grab this code, paste it over. Even as you saw, you can step into a StackBlitz and do it that way. So just a really, really convenient thing.

[00:09:08] So I believe this is done. I'm throwing some errors here, let's see. What I need to get. If this doesn't work, I may be importing the wrong components here. So what happened with angular 9 is you had a compile system that kind of the legacy compile system. And now with angular 9, they introduced IV, which I talked about that a little bit more, but it's a much much, much, much more optimized build.

[00:09:43] And that might have just been a hiccup. So let's see here. Refresh, oops, there we go. So I haven't put any styling. But here's the card. Now, let me add another one in. So I'm just gonna copy this so we can see. We'll go into here. Save this, Compiled successfully, good.

[00:10:11] We'll hop in. And now you can see the form. So what this looks like in the code, and without context they say yeah, that's two form fields. Is how you see or how you leverage a component is through kind of these selectors here. So if you wanted to add another card, it's this mat-card, and so you can kind of see here that I'm getting these hints of what is available.

[00:10:42] And then I'll do a form field etc. And one thing I will point out is if you go to your plugins, there's a bunch of really helpful ones. And the one that I like to use is this Angular Material 2 Flex Layout, snippets thing. And so I can even in the repository, I do some of the snippets that I see is is helpful.

[00:11:11] So you can see here, mat-tab-group, you click and it just streamlines that. So this is this is one plugin that I use quite a bit, and this is my one time technologies, five stars. 140,000 downloads, I'd say that's probably pretty good. So this is again the name of the game is efficiency.