What are the differences between template and templateUrl properties and when to use one over the other

It is always good practice to extract templates into a separate file if the view template is longer than 3 lines.

With an inline template, we lose Visual Studio editor intellisense, code-completion and formatting features. TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.

With an external view template, we have Visual Studio editor intellisense, code-completion, and formatting features and code in "app.component.ts" is clean, it is also easier to read and understand