Angular's templates mix native HTML with custom elements.
In this short tutorial we see how to use inline and external templates and how to use the
moduleId property to specify relative URLs.
In the text below, when you see a word or phrase, click on it to highlight the source code.
Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.
Inline templates are specified directly in the component decorator as shown here.
Template literals with
Note that the following elements cannot appear in a template:
External templates define the HTML
in a separate file and reference this file in
The official Angular Style Guide recommends that templates are extracted to their own files when the template contains more than 3 lines.
To use a
we must include the
For CommonJS we use the value
, and for SystemJS we use
Component Relative Paths in Angular 2
for more details on
To find out more about Angular components, check out these tutorials.
<input>fields such as
ngStyleto transform the DOM.
@Outputto pass data in to and out of a component.