- Read Tutorial
- Watch Guide Video
This is going to be a really fun guide because I love how Angular two works with outside templates. So right here in our component, and both of our components actually have views right here, so I'm going to bring these up one on top of the other. We have our app component, and this has the text navigation and then it has our router outlet and then down here we have our home page component which just has the text home page.
This is fine if all you have is a title but it's pretty rare that you're only going to have you know one line of text here. So what we're going to do is create some template files. I'm going to start off with the home page one, and inside of home page I'm going to create a new file, and when I hit save I'm going to call this homepage.component.html.
This is a standard naming convention that Angular follows whenever you're working with components you give the name of the component followed by a dot followed by component and then dot html or whatever it is. So for the actual component itself we're going to .ts for typescript but here we're going to say homepage.component.html because that is a html file.
If I come back to the component here then I can grab this code and the cool thing is I can treat this exactly like a regular html file.
if I want to add a paragraph tag here I can say welcome to the freelance dashboard hit save. Nothing changes over here yet because we need to call the template. So right here it is empty and if I hit save then home page is going to disappear from here. And that's because we don't use the template key word here for our metadata. Instead we have to use templateUrl.
templateUrl is going to expect whatever the file is so because we're in the same directory we can simply type in 'homepage.component.html'. if I hit save on this, nope it looks like we have a little error here. Let's see what it is.
I think this one may actually have to do with the one that I told you about earlier where you have a moduleId and you have to pass in module.id,. If I save it now, that worked.
There you go. That's something that I'm still trying to get used to myself when I'm building these out is that these components have to keep track of a module ID. That is what's simply letting Angular know exactly what modules being referenced.
Here just in review you have to create a module ID then in the template URL you pass, as a string, whatever the file is that you're working with. Because we're in the same directory we could simply call homepage.component.html and this is a standard practice which is to have your component template file in the same location and in the same directory as the component that it's going to be called from. Now all of this part of it works. Now let's do the same thing for our master component.
For our app component I'm going to come up to app hit new file save and this is going to be app.component.html.
And nothing changes here. It's just going to add it for us. Now I'm going to take all of this html code here.
Paste it down in our new file
and then I can get rid of our back ticks and pass in app.component.html.
Then make sure to change this, it's no longer a template. It's the templateUrl because we're referencing an actual URL instead of the template code itself. I'm going to hit save and as you can see all of this is back to working properly
but now we're not cluttering up our component metadata with all kinds of view code. That would be a very poor practice and it would make for an incredibly messy applications. This is considered the best way of doing this, which is to use template URL and then pass in whatever the file is and then you can do all of your cool view stuff all inside of that component html file.