D/w Template VS TemplateUrl in Angular

@Component decorator is a function , and it has got two template properties one is template and the other is templateURL

Different ways to create Templates in Angular

We have got two types of templates one is 

1. Inline template
2. External Template

using the template property. That means you need to write the required HTML inside the typescript file.

Create a component

.ts

appModule.ts

Index.html

Output

Using double quotes:

You can also replace the above HTML Code within a pair of double quotes as shown below and it also work as expected.

When you have multiple lines of HTML code then you need to use the tilt otherwise you will get a compile-time error as shown in the below image. 

External Template:

The External templates define the HTML in a separate file and refer to that file using templateUrl property of Component decorator

When you have a complex view, then it is recommended by angular to create that complex view in an external HTML File instead of an inline template

.html

Output