Expert Angular

Using templateURL to include a template

In the preceding code snippet, we created the template and component class in the same file. However, when the complexity of the component class increases in both template elements and class definitions, it will be difficult to maintain it.

We need to separate the logical class and the view so that it's easy to maintain and understand. Now, let's take a look at another way of defining the view template for the component using templateURL.

The syntax of using templateURL for viewing is as follows; let's create a file named app-template.component.ts:

import { Component } from '@angular/core';import { FormsModule } from '@angular/forms';@Component({ selector: 'app-data-binding', templateUrl: './data-binding.component.html', ...