What is a template?

By connecting controls to Angular component properties, you may display data in a template, which is an HTML view. The template for your component can be kept in one of two locations. The @Component decorator’s templateUrl property allows you to declare the template either inline using the template property or in a separate HTML file and link to it in the component metadata.

Using inline template with template syntax,

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

@Component ({
   selector: 'my-app',
   template: '
      <div>
         <h1>{{title}}</h1>
         <div>Learn Angular</div>
      </div>
   '
})

export class AppComponent {
   title: string = 'Hello World';
}

Using separate template file such as app.component.html

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   title: string = 'Hello World';
}

I hope you will like the content and that it will help you to learn What is template? If you like this content, do share it.