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

Angular recommends to extract templates into a separate file, if the view template is longer than 3 lines. Let's understand why is it better to extract a view template into a separate file, if it 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 Not only the code is clean, it is also easier to read and understand.

Difference between templateUrl and styleUrls

templateUrl refers a single .html file where as styleUrls is an array where we can refer to multiple .css files.

@Component({

  selector  'app-root',

  templateUrl  './app.component.html',

  styleUrls  ['./app.component.css',….]

})