This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Angular Material" Lesson
[00:00:00]
>> Lukas Ruebbelke: So back to the CLI. Let's start to build a cell. So,
>> Lukas Ruebbelke: In recent addition to the English CLI is the ability to add in third party dependencies from the CLI. The biggest one is Angular Material. So from the command line if you want to add in Angular Material that you can just ng add angular/material.
[00:00:38]
>> Lukas Ruebbelke: And since we are dealing with angular material, let's go ahead and let's do, I'm gonna do one other thing real quick and just get it out of the way.
>> Lukas Ruebbelke: When you are dealing with Angular Material specifically, that they broke out every one of the components into kind of their own imports.
[00:01:09] And so, one of the kind of fresher new things is that when you want to pull in like I need a check box, a button, a text input, etc., that you have to kind of pull them in one by one, piecemeal. Which I understand why they did that and there's a good reason, but as you start to work in your application and you want to start adding things, it can really become cluttered and noisy.
[00:01:33] So, what we're going to do is create a material module. Is what you do is you actually, create a stand-alone module that just imports everything that you need and then, exports it. So, you're not having to go into your other applications, and then adding those in one by one.
[00:01:49] So, think of this as kind of, a barrel roll of sorts that we're just basically wrapping this as a module. So we'll go ng g lib and material. So the difference here is when you're generating an app or a lib, it's pretty close, and now if we look in the Libs folder, we now have a material folder.
[00:02:16] Which in here you'll notice that we have our module, let me scale this back down. And so it's just an angular module. And then what we will do as well is you want to make this available for import in other parts of your application, so by default it does this export star.
[00:02:38] I generally will come in here and fix this. I think the star is ambiguous and so I like to be very precise about what I'm exporting. Now if we go into our material module and we're going to hop into our snippets here and use our first one. So we're just going to copy this or copy the entire thing and then if we go over here.
[00:03:12]
>> Lukas Ruebbelke: Just paste that in. And we do not need the common module. So,
>> Lukas Ruebbelke: This is kinda big win number two, as this will save you a lot of time. So imports, we just paste that in. And then what we'll also do is not only are we going to import them, but we are going to export them.
[00:03:36] This is exports rather, there we go. The nice thing about having a modern ID for most of the time it works, is that you saw how that basically got red and angry. It was like, something's not right, I was able to hop into exports, or it's export, change it to exports.
[00:03:58] Now, what we can do is we can make this available to our application. So if we go to, or our dashboard application, if we go into the app module, so this is in the dashboard application, source, app, app module. And if we go down here into our imports, we can now start to type in MaterialModule
[00:04:28]
>> Lukas Ruebbelke: And one thing I wanna call out is, where is my clicker.
>> Lukas Ruebbelke: If you notice here import MaterialModule from@workshop/material. So this is one of the reasons why we changed that MPM scope, but this is a lot nicer than .../.../, lib, dot, dot, dot, dot, dot. And so this is a really handy way to keep this nice and clean, and then I'll go ahead and just organize these again.
[00:05:04]
>> Lukas Ruebbelke: Make sure that everything is still building.
>> Lukas Ruebbelke: workshop/material, all right. Let's just see if we can just regain the policy again and see what happened.
>> Lukas Ruebbelke: There we go, so one thing I have found that because of the moving pieces sometimes. And I think, I gotta be careful what I say, but I find that Visual Studio code I think it's a phenomenal editor, I think it does a lot of things really well.
[00:05:45] But occasionally I sometimes like the language services will conk out or the terminal will get weird or there's like weird cache and so the first thing I do is kind of recompile or I'll shut down the ID entirely and then restart it. So, now that we have the material module in, we pulled in the material module, wrapped it in its own module and then now we're making it available to our app module.
[00:06:15] All right, back into the command line. Let's generates some additional pieces that I know we're going to need in our application.
>> Student: Could you explain a little bit why you did that, why you re-export the material library, as your own library?
>> Lukas Ruebbelke: So what would happen, so the question is why do we create this material module, import it and then export it back out?
[00:06:43] Is imagine if you had, let's say, three applications in your work space. Without wrapping this in a module, you would have to, at the top of every one of these, of your applications, you would have to go into your applications. So prior to kind of this technique, what I would end up doing is I would be in my, let's say, my application module, and I'd be importing them at the project level.
[00:07:16]
>> Student: Okay.
>> Lukas Ruebbelke: And then I would be down here, not only importing them, but then I would also in the declaration say, like, I need to clear this or make this available to my application. And so now, what this allows you to do is, keep this, out of all your individual stand alone applications, and come in and simply import all of that into as a single module.
[00:07:45] So it's kind of like a barrel roll at a module level and it's just a nice way to keep your application module nice and clean. What I have found as well is that if you are working across a couple different applications and then you wanna add a particular, say you wanted to add in a material stepper.
[00:08:05] Well then you have to go around it and kind of do that across the board or this is in a single place. And the only drawback is that you might have a small application that maybe is using two or three of them. Then I would consider possibly just cutting another module with just those, so that you're not incurring the overhead of all of that.
[00:08:26] So, excellent question. All right. So let's go back to our command line. So you're importing all of the material stuff that you need. And then, the thing that I did not copy and paste cuz I wanted to talk about this, is in our ng module. So that's the decorator that takes a module configuration.
[00:08:43] We have imports which is an array of things that we want to import. And so you notice here that we have angular/material, and everything is broken up into their own separate modules, and we're just bundling this up, and if you go to exports, then we're saying I'm going to pull this in, so it's available to this module.
[00:09:03] But I'm also going to make it available,
>> Lukas Ruebbelke: For every other module or application that consumes this in. And if we just go down to the bottom, what you have is, you're just exporting the material module itself, which is just a class. So back to the command line and let's generate some stuff.
[00:09:27]
>> Lukas Ruebbelke: And so what I'm going to do is I'm going to generate some libraries, some components, and just so that they're there. And so we can start to see now, at scale, how these pieces start to fit together.