This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Adding the Application Shell" Lesson
[00:00:00]
>> Lukas Ruebbelke: So one thing I will do very quickly is, we'll go back to my app, component dot html and I'm going to just pull this out. And in its place, let's put in the projects. So we'll go to the ProjectsModule. I'm just going to,
>> Lukas Ruebbelke: Export the ProjectsComponent so that it's available here.
[00:00:36] So this is in the ProjectsStyleModule. We're exporting the Projects.Component. And then I'll hop back into app.component.html. And we will add in app.project, and I can see that because we have exported this properly that the code was able to pick that up. So Intellisense is amazing when it's working, it is incredibly frustrating when it's not.
[00:01:10] All right so now we just add it in our projects component into our app component.html. So if we go back Into our application, we can see here local host, 4200, project works! And so this is very, very small, but this is typically default when you generate the component that it just says whatever the component's name is, it works.
[00:01:41] Now, let's hop into our snippets, and let's build this out. And so I'm going into the snippets file. So if you go to the projects component, down here we're just going to copy this and we're going to paste this in to our code. So this is all HTML, so in our projects.component.html we're going to paste this in.
[00:02:19] Now you'll notice here that in our math card content these different angular material things that it's angry like what's happening. Because the projects component is behind a module we need to go to the projects module,
>> Lukas Ruebbelke: Here and we need to import the material module.
>> Lukas Ruebbelke: There we go.
[00:03:01]
>> Lukas Ruebbelke: Like so. Now if we go back into our component that the language services hasn't caught up but this should be good to go. As you can see here that now we have some basic layout and we could start to work with this. So this is strictly just basic HTML.
[00:03:24] While we're here, since we're building this out, let's go up and let's also do the App Component. So we'll just copy App Component and if we go to app component.html, I am going to just paste this in.
>> Lukas Ruebbelke: Here, and I'll walk through the structure here in just a moment, of what we are doing.
[00:03:59]
>> Lukas Ruebbelke: All right, so just make sure that this renders, and I will catch everybody up on what we are saying.
>> Lukas Ruebbelke: So this is our component, or projects component. The difference is that we have went into our app component, and using angular material we started to structure some components.
[00:04:25] And so we have our tool bar right here. With our icon, we have our logo, some different things. So these are strictly just structural, here's how we're going to organize. As you can imagine, we created the UI tool bar, anybody want to take a guess where this is going to be going eventually?
[00:04:43] Into that lib. Then we have a sidenav-container. What this does is it allows us to basically put a navigation into the sidenav, and then just outside of that we have our main content. So if anybody would like me to offer more commentary on some on angular material components.
[00:05:06] But I typically find their fairly self descriptive and that's nearly interesting is what's happening under the hood in the angular. And so if we go back to our projects component, what we see here is I just have two columns and two cards. Okay, so this is a very basic component.
[00:05:28] There's not other than the angular components themselves that very well documented. We're not doing anything yet. Yes sir?
>> Speaker 2: Do you have ES code extension that's doing that? Sort of smart looking into your angular modules and determining what's going on.
>> Lukas Ruebbelke: So there's angular language services under the hood.
[00:05:53] That's kind of surfacing some of the angular pieces as well as, because this is type script, that it's able to infer certain things that well, this is now being exported from this thing. It is now available. And most modern browsers or modern IDEs will do that. So WebStorm and VSCode, I kind of flip flop between the two, and they're pretty good about introspecting and seeing the code.