template: Defines the HTML template inline within the component decorator:
@Component({
selector: 'app-example',
template: '<h1>{{title}}</h1><p>Inline template</p>'
})
templateUrl: Points to an external HTML file:
@Component({
selector: 'app-example',
templateUrl: './example.component.html'
})
Use template
for simple, short templates and templateUrl
for complex templates that benefit from syntax highlighting and better organization.