This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Template Driven Forms" Lesson
[00:00:00]
>> Lucas Ruebbelke: Let's actually look at the application real quick and just see where we are. So if we go to Items, you can see here, like when you select something, it actually goes into the form. Well, currently, as it stands, on Widgets, we're just dumping the selected widget into the page.
[00:00:20] So we're just saying, this is what it is, and we're just dumping it in. So our goal for the next module is to talk about template-driven forms, but the idea is to take this module or this selected widget object, and actually push it into a form on the page.
[00:00:37] And so with any application, obviously you have to accept user input. So especially with master detail views, a form is kind of mandatory. So we're gonna start with template-driven forms, which is kind of how we did it in AngularJS. And I think the simplest version for simple forms, totally appropriate.
[00:00:54] And then later today we'll talk about reactive forms. But for now, let's jump into, drum roll please, template driven forms.
>> Lucas Ruebbelke: So we set the stage. We have this object we're selecting, this widget object. We're just dumping it in the page, but we need to put this in a form, so we can actually do something with it.
[00:01:16]
>> Lucas Ruebbelke: So we do this with forms. So the first pass that we'll take at this is with template driven forms. And there's kind of, I would say, two main parts that go to this is, one, getting the FormsModule into the app, which is really quite simple. Angular CLI fortunately does this for us.
[00:01:35] But then understanding how Angular is controlling the form under the hood. And then to kind of top things off, there are some ways that you can validate or actually style your form based on its validation state. Is it valid not? And so, depending on your design. And so this is for the UX people out there.
[00:01:57] You may actually wanna show some kind of a micro-interaction of some sort. This is not in a good place, let's show something some user, or we actually wanna do a specific color. Or cue the user that this is not a good place, and do this in a meaningful way.
[00:02:14]
>> Lucas Ruebbelke: So to use forms in an Angular application, we simply need to import the FormsModule from Angular forms and add it into our entry module import section. Because we're using Angular CLI, the CLI is already done this for us. But if you were, for some reason, you're spinning something up by hand or you had a pre-existing project that was not from CLI, then you would need to do this by hand, so CLI does this for us.
[00:02:46] But be cognizant that this must exist. So the Angular team, wisely so, has broken up the functionality, the core Angular pieces into smaller pieces that you can just use as you see fit. So, there for instance may be, let's say, a kiosk application that there are no forms, that you're simply showing data.
[00:03:10] Well, in that case, it would not make sense to actually incur the overhead of the FormsModule or any module that you're not using. And so, by being able to pick and choose a la carte what you want, and we'll talk about this tomorrow, is I think on of the easiest ways to increase the performance of your application by simply making it smaller.
[00:03:32]
>> Speaker 2: Also, in addition to that you have to add it in the package or JSON, right, otherwise it won't-
>> Lucas Ruebbelke: Right, so the question was do we also have to add it to package.json? And the answer is yes. So these are separate npm packages that you install and then import into you application.
[00:03:50] So if we hop over to the package.json,
>> Lucas Ruebbelke: You'll be able to see here that we have a bunch of things kind of happening here. So we're just adding these things in bit by bit, so animations, CDK, the common, which is kind of the big piece as well as the compiler, core, this is what we're interested in here, forms.
[00:04:14] HTTP so you may actually may not be making server side calls, in this case we are. And, the routers and the different things, is that if you don't need it, don't use it but if you do then make sure you install the npm package, so that you can import it and make it available in your ngModule.
[00:04:31] Yes.
>> Speaker 2: So if we were to want to use say Bootstrap instead of material. We talked about this a little bit yesterday, but would you just add it right there, or do an npm install, some third party library?
>> Lucas Ruebbelke: So, let's find just a viable library, I'll show you how we would do this.
[00:04:53] So,
>> Lucas Ruebbelke: I've actually seen this in the wild.
>> Lucas Ruebbelke: And so if I were gonna use this, I would just go, so this is, right here in the docs, this is ng-bootstrap.
>> Speaker 2: But that's a specific bootstrap for the Angular
>> Lucas Ruebbelke: Yes.
>> Speaker 2: With the at symbol before it's using a-
[00:05:25]
>> Lucas Ruebbelke: So the reason why you have at symbols, and so this is kind of a new thing, is it allows you to kind of name space your packages withing an organization. So for instance if you look here,
>> Lucas Ruebbelke: Is everything is kinda under this scoped Angular org, but here are the available packages within this.
[00:05:47] And so, in this case, we have ng-bootstrap. And I would wager, if we went to,
>> Lucas Ruebbelke: Let's see if I can find this here.
>> Lucas Ruebbelke: If you went to the repo.
>> Speaker 3: Start will take you to the repo.
>> Lucas Ruebbelke: What's that?
>> Speaker 3: Start will take you to the repo.
[00:06:20]
>> Lucas Ruebbelke: All right, apparently I'm becoming a fan of ng-bootstrap. That they would have inside the organization multiple packages that they are exporting out. So not to get in a rabbit hole, but they might only have one but it allows you to put multiple packages within, kind of a name space, which is what Angular's done.
[00:06:43]
>> Lucas Ruebbelke: So, back to this. This looks good. And actually, since I'm here, I'll show you another one. Let's see how this one works. So PrimeNG is actually a pretty nice library. It kinda just came out. I didn't know about it, I've been using it on another project and it is ridiculous.
[00:07:02] Super nice.
>> Lucas Ruebbelke: Same thing. So MPE's just like, I wanna use this and,
>> Lucas Ruebbelke: Done deal. So npm install and then you can go in and then important the things that you wanna use.
>> Speaker 3: Okay, but,
>> Speaker 3: Once you run the install the CLI's gonna put it in the dependencies.
[00:07:30] It adds it to the dependencies, so then it's available. You don't have to do anything else.
>> Lucas Ruebbelke: Yep, so let me-
>> Speaker 3: So then you just reference it in a-
>> Lucas Ruebbelke: So I'm gonna go ahead and do this. All right, so npm install PrimeNG, so that's the package, I'm doing --save.
[00:07:44] So what this is going to do is install this as a dependency, it packaged out JSON. So just notice here, nothing, it'll probably go right here.
>> Lucas Ruebbelke: So npm install primeng --save. Now if I did --save.dev, it would put it down in dev dependencies. Okay, and so you can see this is completed, and then from here,
[00:08:12]
>> Lucas Ruebbelke: It's now in my modules, then I can go into here and import it. So then, I would, Angular material or anything like that, just import it, add it into here, and it's available.
>> Speaker 3: Okay, you would add it to your imports.
>> Lucas Ruebbelke: You'll see here that if I went over to GitHub, or let's just say, get client here, tower.
[00:08:50]
>> Lucas Ruebbelke: You can see that I've made this change. So I check this in and so the next person that basically clones this project and they run npm install, its gonna run through and install all of this. It's going to be available, for anybody else. So I've basically said this project needs this thing to work.
[00:09:06] And so this is how package.json kind of keeps track of it. So this is how you would add Bootstrap, Prime, NG, anything that you need. You just add it to your package.json and you're good to go.
>> Speaker 4: In their app module you would add it to [INAUDIBLE]?
>> Lucas Ruebbelke: Yes, and so then you could,
[00:09:28]
>> Lucas Ruebbelke: Here just import.
>> Lucas Ruebbelke: And there we go, makes sense?
>> Speaker 4: Yes.
>> Lucas Ruebbelke: All right.
>> Lucas Ruebbelke: Where was I? [LAUGH] I don't know. I don't think that matters. Yes, so that's why you will have to do this by hand. So I think the point I was trying to make is that use the stuff you need, don't use the stuff you don't need.
[00:10:02] Gone are the days of, I have this application and there's 200 megabytes of dependencies and I only need a fraction of it. And I think fundamentally that's why, in my opinion, why Bower failed. Is the idea would say you could say I have this thing I wanna use in my app, Bower Install.
[00:10:21] But the problem is it would get go get the entire GitHub repo and just add it to your project. Now do that for I need five things, and you've got five repos tagging along, and it was just really hard to kind of sort that through, where npm, I think it's a little bit more streamlined.
[00:10:45]
>> Lucas Ruebbelke: I think I planned to spend two minutes or less on this slide, nailed it. So if there is this confusion of how do we get stuff into our Angular application, I certainly want to address it. npm really is the way to do it. And then pull that in, and then import it into your ngModule.