template holds a component's HTML inline as a string inside the decorator, while templateUrl points to a separate HTML file.
@Component({
selector: 'app-example',
template: '<h1>{{title}}</h1><p>Inline template</p>'
})
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
Use template for simple, short templates, where the markup is easier to read next to the class. Use templateUrl for complex templates, because a separate file gets HTML syntax highlighting and keeps the class file organized.
The choice does not change how the app runs. The ahead-of-time (AOT) compiler inlines external templates into the JavaScript at build time.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓