Differences of using Component template vs templateUrl

Question

Angular 2 allows to write multi-line templates by using ` characters to enquote them. It is also possible to put multi-line template into .html file and reference it by templateUrl.

It seems comfortable for me to put the template directly into component as then it's all in one place, but is there any drawback of doing so?

1st approach:

import {Component} from 'angular2/core'; @Component({     selector: 'my-app',     template: `     <h1>My First Angular 2 multiline template</h1>     <p>Second line</p>      ` }) export class AppComponent { } 

vs 2nd approach:

import {Component} from 'angular2/core'; @Component({     selector: 'my-app',     templateUrl: 'multi-line.html' }) export class AppComponent { } 

together with multi-line.html:

<h1>My First Angular 2 multiline template</h1> <p>Second line</p>  

Answer 1

In terms of how the final application will perform, there's no real difference between having an embedded template and an external template.

For the developer, however, there are a number of differences that you have to consider.

1. You get better code completion and inline support in your editor/IDE in most cases when the HTML is in a separate .html file. (IntelliJ IDEA, at least, supports HTML for inline templates and strings)
2. There is a convenience factor to having code and the associated HTML in the same file. It's easier to see how the two relate to each other.

These two things will be of equal value for many people, so you'd just pick your favorite and move ahead with life if this were all there was to it.

But that leads us to the reasons you should keep your templates in your components, in my opinion:

3. It is difficult to make use of relative filepaths for external templates as it currently stands in Angular 2.
4. Using non-relative paths for external templates makes your components far less portable, since you need to manage all of the /where/is/my/template type references from the root that change depending on how deep your component is.

That's why I would suggest that you keep your templates inside your components where they are easily found. Also, if you find that your inline template is getting large and unwieldy, then it is probably a sign that you should be breaking your component down into several smaller components, anyway.

Answer 2

The drawbacks are that the IDE tooling isn't as strong as mentioned above, and putting large chunks of html into your components makes them harder to read.

Also, if you are following the angular2 style guide, it recommends that you do extract templates into a separate file when longer than 3 lines.

From the angular2 style guide :

Do extract templates and styles into a separate file, when more than 3 lines.

Why? Syntax hints for inline templates in (.js and .ts) code files are not supported by some editors.

Why? A component file's logic is easier to read when not mixed with inline template and styles.

Source