What do you mean by template and templateUrl

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

@Component({

    selector: 'my-app',

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

})

export class AppComponent {

    name: string = 'Angular';

}

template:

Look at the above example, the template contains inline HTML. It is using the backtick characters to define the inline HTML. Instead of backtick character, we can also use single quotes and double quotes as long as the inline HTML is of a single line. But when it is more than one line at that time we have to use backtick characters to define the inline HTML. 

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

Single or double quotes are not allowed for multiline inline HTML and through an error if used. 

templateUrl:

Instead of using an inline view template, you can have it in a separate HTML file and refer it in your typescript file. To refer external HTML files we need templateUrl instead of a template.

app.component.html

<h1>

    Hello {{name}}

</h1>

app.component.ts

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

@Component({

    selector: 'my-app',

    templateUrl: 'app/app.component.html'

})

export class AppComponent {

    name: string = "Angular";

}