Angular - template Vs templateUrl

import { Component } from "@angular/core";

@Component({selector:'my-App',

            template:`<h1>{{name}}</h1>`,

            templateUrl:'app.component.html'

})

export class AppComponent

{

  name : string = "name";} 

template and templateUrl can be used inside the decorator.

template:

• When a template view content is very less, template property can be used.
• This content can be present inside single/double quotes or backtick characters as displayed in the sample code.
• Single/double quotes can be used whenever the content is in a single line
• If the template view content has more than a line then, it is mandatory to use backtick character

DisAdvantages

• Intellisense and formatting can't be done using Visual Studio / VS Code
• Hard to read when Typescript and HTML are present together if HTML content is more

Example:

• template:`<h1>{{name}}</h1>`,

templateUrl:

• The external HTML file can be referred to when the content is more as referred in an initial screenshot
• It provides better readability, Intellisense and formatting the content

Example:

• templateUrl:'app.component.html'