Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.5 The App Component

At the end of the last lesson we bootstrapped the app module that is our application. And when we came to view it in the browser we found this error. The module is bootstrapped. But it does not declare in NgModule.bootstrap components. Nor a ngBootstrap do method. So please define one of these. So the problem here is that we've bootstrapped the module. But the module doesn't know what component to load first. And so we need to create a component. That we will add to our ngModule decorator as a bootstrap property. So that the module knows to begin with that component. So let's head back to the terminal here. And inside of our app directory, we will create an app.component.ts file. And what we're gonna be doing here. Is creating the first of many components that we will be creating as we build our application. And the first step, it will always be to import the component decorator. So let's import Component from, @angular/core. And just like we did with NgModule, component is a decorator that we will use to decorate a class. So let's go ahead and use the Component decorator. And just like with NgModule it's a function that you call. And we're going to pass it an options object. Now the first parameter that any one of our components will need is a selector. And this is just a selector as in a CSS selector. That we will use to target specific elements in our HTML page. Now we actually already decided what our component will be. Or I should say the Angular quick start did. If we open up our index.html, you can see that inside of our body here we have this my-app tag. This is the top level tag or element that we've added to our index.html file here. So this is what we're going to name our app component. And so this is what the selector for our app component should be. So in our app component file here, we just have to set the selector to my-app. This is how we can create custom HTML elements within Angular. The other attribute that we'll need here is a template. And for now let's just use an h1 and we'll say, Hello Angular. We'll change this in a minute. But just so we can get an idea of what's going on here. Let's add that. Okay, so we have our decorator here but it's not decorating anything. So let's go ahead and export a class here. And this is going to be the AppComponent class. And there's nothing in that class right now, so we'll just leave it blank. All right, so we've created our AppComponent now. But we haven't yet told our module to use this AppComponent. So, this is going to be a step that we have to perform for every component. And other Angular pieces that we create too. We'll have to open up the app.module.ts page. This is where all of the pieces that we make come together. The first thing we'll have to do is import our new components. I should mention here that you'll notice. I've been naming the files in the same pattern that most of the Angular documentation does. That is for a component file we call it component name.component.ts. Or for a module it's whatever we want to call the module .module.ts. I think this is a pretty nice convention because it makes it really clear what exactly is in the file. Plus when you're importing like this it almost looks like that's the file extension. Which I think is kind of a neat idea. So we're importing the app component here. And now we need to include it in the NgModule. Let's add a declarations property to our NgModule decorator here. Every class that we create that we want to use within our module. We need to declare here as being part of the module. So right here I'll just throw the app component class in. Since we have to do this for every class we create, we'll be doing this quite a bit. Finally, we need to add a bootstrap property. This is what that error in the console back in the browser was complaining about. It bootstrapped this module but it didn't know what component to bootstrap. Because we hadn't included this bootstrap property. So this is an array but for us there will only be one component in here. And that is the AppComponent. All right, now our TypeScript server will be recompiling this. Actually, it looks like we have a problem here. Okay, it looks like we misnamed one of these properties, the declaration. And that should actually be declarations. So if we go ahead and fix that then, okay, Compilation complete. That looks good. So let's head over to the browser. And look at that, everything seems to be running properly. We have Hello Angular which is the template for our app component. And down here you can see we have only one error. And that is that our styles.css file does not exist yet. I'm going to throw in a styles.css file that I have written for this application. It just adds a little bit to the Angular material that we'll be using. We're not gonna go over it because CSS isn't really a focus for this course. But it will be available for you to use in the code downloads. All right, before we close this lesson out let's make one more change. If we come back to our app component here, we've just put a template right here inside this file. And if you'd like you can do that for your templates. But some of our templates are gonna get kind of large. So instead of providing an inline template like this. Instead we're going to pass a template URL instead of a template. And we're going to create a directory called templates where all of our templates will be stored. And so we're going to look for the file here templates/app.component.html. Now this templates directory, if I head back to a terminal here, is going to be at the root of our project. It will be a sibling directory, if you will, of the app directory. So let's make a directory called templates. And now let's open up a file here, templates/app.component.html. And in here let's start building our template. We'll use some Angular material components. md, which of course stands for material design. And all of the material components are prefixed that way. So we'll have an md-toolbar. And let's set the color to be accent. And in here let's add a span. We'll give a class of md-tool. I should mention that that class is one that I've written, not one that comes with material design. And we'll just put the title of our application in this span just like that. And then underneath this, let's have a div with a class of container. And in here, let's put a router-outlet. As you might suspect, eventually we will have different routes for our application. And those different routes will have components that need to be rendered. And they'll all be rendered inside of this app component. So this is kind of like a parent component, if you will. So we'll stick our router-outlet in there. We'll get back to routers a bit later on, but for now that will be quite enough. There's actually one more thing we need to take care of. And that is if we want to use these material design components. We have to add the material module to our app module file. So let's come back in here and let's go ahead and import the material module. And we're gonna get this from @angular/material. And then right down here inside of our imports let's import MaterialModule.forRoot. And forRoot is a function that we have to call. And that's just how you import material module. And before we check it out, there's one other thing we'll need. Because we're using the router-outlet here, this is a component that's only available through the router. So let's go ahead and import the router module as well. And then within our imports here, we will import router-module. Actually the same way we do material, forRoot. And for now we'll just pass an empty array of routes. But later on we'll be adding some routes. So, that should do. We won't get any errors because of the router-outlet. And if we come to the browser here it looks like we have one more error to solve. No base href set. Okay, this is actually a really quick and easy one. So if we come over here to our index.html file, the router expects us to have a base element here. Which will determine what the route URL for the router should be. So we will set href equal to /. Which means we just want to manage routes right from the root. So let's go ahead and save that. And if we come back to the browser our page is now rendering. Now, we do have a couple of errors here which just say there are no routes and the router didn't find anything. But that's fine, we can just ignore those. Because we have our app component rendering nicely. We'll come back to solve those errors. But for now, let's enjoy the success of getting our app component up and running.

Back to the top