Adding Angular Material

[00:00:00]
>> I'm gonna go ahead and I'm just stop this for a moment and because I don't want to see my compiler lock up again. And what we can do now is we can start to add libs to or functionality via libs into our application. And so, the first thing I'm going to do is I'm going to add some additional packages or libraries to help me do that.

[00:00:33]
So, from the command line, let me just make sure I'm in the right folder, very good. I'm going to add in angular material, and ngrx. So we're gonna go nx add and we're gonna go angular material. Again, pinning the version for anybody watching this in the future and then I'm going to go ahead and fill these flags out.

[00:01:04]
So the reason or how I typically do this is I'll run it once, and I'll watch for the flash or I'll watch where they'll asked me questions. And then I'll go and try to figure out how do like, I not have to put that in again. And so for instance, this is helpful that in the interwebs, And I just had to Google this and poke around or rather I went to the project and I poked around, is you can actually in the code for nx so this is the create--nx-workspace.

[00:01:46]
You can go through here and you can start to parse out the parameters that are available to you. And so this is not super elegant, but I think not having to add in a parameter every single time or to go through that is really helpful. So the big one I was looking for the other day was linter cuz I didn't wanna have to choose between my linter.

[00:02:09]
So when you are building something out, occasionally, you just have to actually go look in the code or look at the documentation to figure out what the flags are so you can streamline it. And we'll do defaults true again and I'm just gonna jump the all the way to the end here, and I'm going to hit Enter.

[00:02:32]
And so what this is gonna do is it's now going to go and it's going to add angular material and it is going to add in ngrx into my application. And so this is how we add essentially third party libs into our nx workspace. And how this works under the hood just for a little bit of trivial is that there are essentially nx compatible schematics that when you do nx add.

[00:03:08]
Or it's really angular compatible schematics is that it goes and it grabs everything that you need and installs it. And it basically spins it up but there are the kind of these blueprints under the hood that do this for you. All right, and so now we have material nest available to us.

[00:03:31]
And let's converge on a data model cuz we're gonna go ahead and now we're gonna generate a bunch of code. So, if we go into VS code, and I'm gonna just bump this down just a bit, kind of back to normal. That what we can do is if we go to api-interfaces, you'll see here in the libs, here's this api-interfaces.

[00:04:08]
Now within this, what you can do is typically what I'll do is I'll go export interface, BaseEntity. And all I'll put here is id is string or null and this is because pretty much everything that comes through, you're going to have an id. And then we're going to do Widget and we're going to extend BaseEntity.

[00:04:45]
And we'll go title string description, [SOUND]
>> Is extensive.
>> Boom, thank you if I had a T shirt, I would throw it into the crowd right into your hands. This is typically what I'll do like right from the beginning is what is the interface. And so if you're gonna do something like items or whatever, and typically for me if I'm just stubbing something out title and description is my default.

[00:05:24]
And so the reason why I did that is because I'm gonna generate code and we are going to essentially use Widgets as is gonna play a central role in that.