Learning Angular 2: Tour of Heroes Tutorial, Lesson 4

This lesson starts off with creating a new component and a separate Hero class file which is then imported into both of the current components:

import { Hero } from './hero';

Worth noting that './' is relative path syntax that indicates that the file we're importing from lives in the same directory as the current file.  

The manner of embedding the child detail component within the parent component is reminiscent of how custom directives could be added to an existing page in Angular 1, but without the need to handle the data passed into the directive via a scope layer.  

The lesson explains that in order for the hero-detail component to receive the selectedHero from the parent component to use as its internal Hero property, it needs that property identified as an input, preferably with the @Input decorator.  I was curious to see if leaving off the decorator would cause an error.  It doesn't, but it hardly matters since the hero-detail component doesn't show anything if its "hero" property is null.  I did notice that before I added the @Input decorator, IntelliJ had the "hero" property displayed in gray (the default color for indicating an unused variable in IntelliJ), but after I added the annotation IntelliJ changed the color to indicate the variable was being utilized, so there's a hint for the future when looking for silent errors.

The need for the @Input decorator makes sense once you read the documentation linked to the lesson:  it's a way to explictily control which properties in your component can be "targeted" / are made publically accessible to another component.

At the conclusion of the lesson, I wanted to confirm that this method of including the sub-component via a custom tag in the parent component HTML would also work if the HTML was kept in a separate file.  I was pretty sure that one could use a "templateUrl" property in place of the "template" property within a @Component decorator, but typing "templateUrl" in the search box in the right column of the docs area of Angular.io didn't pull up any results.

But I did find an example of it being used in the style guide.  So I moved all of the HTML from app.component.ts into an app.component.html file within the same "app" directory.  But using the same "./" relative path syntax used with the imports didn't work...unless I moved the app.component.html file out of the "app" directory and into the "root" directory with all the configuration files.  If I want to keep the HTML file in the "app" directory, the syntax for the templateUrl needs to be:

templateUrl: 'app/app.component.html'

...which makes sense, as it's a URL path from the base URL of the application.

And yes, as one would expect, the same HTML with the custom sub-component HTML tag works fine when stored in a separate HTML file.  For components you plan to use in multiple projects, it makes sense to embed the HTML in the component itself (less files to copy to each project), and conversely if the component involves a lot of HTML unique to a certain application it's cleaner to store it in a separate file.