This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Q&A" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Questions are asked about creating separate modules for each component, and the difference between an AngularJS and an Angular module.

Get Unlimited Access Now

Transcript from the "Q&A" Lesson

>> Mark: What is the reason behind creating separate modules for each component? Projects, home, etc. Is it not enough to create just components in one main module like that model.
>> Lukas Ruebbelke: So you absolutely could. And that is depending on the scope that may work. I may just go as far as just creating components in a main application.

[00:00:26] But if you want to set up lazy loading, then you need to set up routing specifically for that feature, which then has to have a module. And so If you want to do lazy loading then you create a module for that feature. So for instance, maybe I only want to use projects or load projects right off the gates and let's say maybe so it might not go to users, well, wrap that in a module and then set it up to lazy load.

[00:01:02] Another reason why I believe they encouraged this in the style guide is it just helps with encapsulation. That for instance, you have a user's feature that has kind of a bunch of stuff in it and allows it to just kind of create a nice container around that. So the answer is, you certainly could get away with not wrapping your feature components and modules.

[00:01:28] But there are some advantages. One, lazy loading. Two, I think kind of having a clear perimeter around that particular feature for encapsulation purposes.
>> Lukas Ruebbelke: Yeah, he was just saying, the difference between an angular js when you were creating a module versus now. Is there any major differences of about how you think about that?

>> Lukas Ruebbelke: So an Angular js Module to an Angular Module. Like from a mental analog I think almost the same thing, is that they're organization mechanisms. That in fact, prior to angular being released, I think it was release candidate six or seven. They reintroduced Ngmodule, and modules at the framework level.

[00:02:23] Because they realized, if we're going to do lazy loading and these different kind of performance enhancements, we have to have a way to communicate at the framework level. That this is how this application is organized and how it needs to be assembled together. Because one of the interesting things is that not only are we having modules at the framework level, but we have ES6, ESNext, whatever.

[00:02:52] We have a module system happening at the language level, which is used for compilation. And so at the language level, we're saying this is how we're going to organize it. But then we're also using Angular module, NGModule, to say this is how this is going to be conceptually organized at the framework level.

[00:03:08] And so from Angular.js to Angular, I typically, I think though, I think philosophically they're the same. Obviously the underlying execution is very, very different. But think of it as containers to logically organize your application into nice composable pieces. Yes.
>> Student2: About, I have a question about the material because it's kind of so tightly integrated.

[00:03:35] This is, how long has it been that Angular material was part of the standard distrubution.
>> Lukas Ruebbelke: It's not part of the standard distribution. So at the very beginning, when I scaffled, is that I went NG add and I was able to add it in. And so you certainly, there's a bunch of other files like UI frameworks that you had use so for instance there is a bootstrap implementation, there's a primeng, there's a couple of different libraries.

[00:04:06] I happen to be a fan of material design as a whole so the language that it's based on, I think it's pretty good as well as Angular material is officially supported by the angular team. So Jeremy Elbourn and his team have done a very good job of building those things out.

[00:04:26] So it's certainly going to have the most or the tightest integration into angular, but it's definitely not baked into it. In other words, had I not done n g ad- At angular/material and build that material module then there would be no angular material. And so I very well could have built this with bootstrap or Prime NG or whatever.

>> Student2: So this is be actively developed now.
>> Lukas Ruebbelke: Yes. So it's actually part of the angular core project. So it's officially supported, there's Google developers, like it's in-house, if you will. So that is for me kinda one of the big reasons is that they work very closely together.

[00:05:12] And Jeremy Elbourn is kind of the lead developer on that. He's at Google, in Mountain View.
>> Student2: So they don't develop any other frameworks, other than Angular Material? Even though it's not part of the official release, but it's as tightly integrated as possible, right? Because of the same team is basically working on it?

>> Lukas Ruebbelke: Right, so one, it's because obviously material is a Google concept. And so Android, if you just look at all of the things from Google, they adopt material so naturally they're encouraged to embrace it and I think material design as a design language is pretty solid. And so that's gonna be the most closely integrated.

[00:06:01] Cuz Google being the creators of material said well it makes sense for us to do Angular material and pay for that to happen. But you don't have to use it, certainly not.
>> Student2: Yeah, I'm just wondering how you picked it, how stable is it? How is it gonna be maintained?

>> Lukas Ruebbelke: Absolutely, I mean it's stable as it can be which is one of the reasons why I picked it.
>> Student2: All right, then.
>> Lukas Ruebbelke: Good question, though. Yes.
>> Student3: Can you add the normal workspace to an existing angular four or to an existing angular for project or does it have to be like the latest Angular six?

>> Lukas Ruebbelke: So you can add Narwhal to an existing angular CLI project. And so for instance, I generated the workspace and for there I'm doing Angular CLI stuff. But if you already have an angular CLI project, you can add in and convert it into a URL workspace. The file structure's not going to be the same, but you're going to have some of the generators and some of the additional tooling.

[00:07:12] But is there a reason, so your four dot X. Like I would wager it would be pretty straightforward to just upgrade. I mean, if I were you, I would cut a branch and update everything and see what happens. In other words, it would not surprise me that
>> Lukas Ruebbelke: Nothing happened, it just would still work.

[00:07:37] Cuz 4.3 or thereabouts that's when it really stabilized. Then they get really serious about not introducing anymore breaking changes.
>> Lukas Ruebbelke: Yes, Mark?
>> Mark: In AppComponent HTML file there is the sidenav reference. Could you access the reference to it in callToggle from the app component itself? Call a toggle method, and then inside the toggle method,

>> Mark: Call sidebar.toggle?
>> Lukas Ruebbelke: I could,
>> Lukas Ruebbelke: Let's try this.
>> Lukas Ruebbelke: Toggle
>> Lukas Ruebbelke: I think it's just lowercase.
>> Lukas Ruebbelke: Then what happened to our app component?
>> Lukas Ruebbelke: And notice we don't have a lot in here yet. Toggle, we will go sidenav.
>> Lukas Ruebbelke: Let's see what happens. Roll the dice.

[00:08:55] Nothing broke.
>> Mark: Do you have to actually pass it, or is it actually set on the component itself?
>> Lukas Ruebbelke: No, so you have to pass it in. But if you wanted to get a reference to it, this is how you would do this.
>> Lukas Ruebbelke: Using viewChild.
>> Lukas Ruebbelke: So what viewChild does, let's see if I can click it here.

[00:09:38] This is not super, it's pretty light. Basically it's a view query. So using viewChild, you can say I want to query my view, find the sidenav reference, and then assign it to this local property. So we will go localSideNav
>> Lukas Ruebbelke: And so the technique there is, cuz we've seen this component decorator up here, but we can also decorate properties.

[00:10:20] We can actually decorate almost anything. But in this case, we're saying, viewChild, go and query the dom. So decorators are just methods that get executed. Go find this element and then assign it to this local reference. In here. And then from there, we can absolutely call toggle on that, or anything else that we want.

[00:10:48] So that's kind of a bonus technique. Is if you have something in your template that you want to pull out locally. And when I'm dealing with observables and DOM events that I wanna actually stream and manipulate, I do this all the time. So ViewChild, sidenav, assign it to whatever.

[00:11:07] We just equally call it sidenav, and then you can reference it in here.