According to Angular guidelines if you have a large template then you will use templateurl and put external file path into the component. For example- If you have template code for perticular component is more than 5 to 6 lines then you will go with templateurl and put external html template file path and if you have wanna do some small thing with template like displaying message and something like that then go with template only. Thanks!

templateUrl is meant for one liner. If you want to mention the html code in one liner inside .ts file, you can make use of templateUrl.

For example,

templateUrl : test.html;

template is used to write the entire content of html as it is.

Example:

template: