Difference between views and templateUrl in AngularJS

In this article, we will see what is Views and TemplateUrl in AngularJS, along with understanding their basic usage through the code snippets & finally see some differences between them.

A Views is anything that a user sees on a screen and is used to set up multiple views or to target views manually. Angular uses views to connect with the platform. In Angular for each element, there is a view corresponding to that element.

Types of Views: The different types of Views are described below:

1. View Containers: View Container holds host as well as embedded views.  And these are commonly referred to as views. Each @Component class registers a view container with Angular. Another type of reference for view container is ViewContainerRef it represents a container where one or more views can be connected.

Example: This example explains the basic use of the View Container in AngularJS.

Javascript

@Component({
    selector: "sample",
    template:
        `<h2>View Container</h2>
      <ng-container #vc></ng-container>
      <p>This is an example of view container</p>`,
})
export class SampleComponent implements AfterViewInit {
    @ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef;

    ngAfterViewInit(): void {
        // outputs `template bindings={}`
        console.log(this.vc.element.nativeElement.textContent);
    }
}

Output:

2. Host Views: This type of view hosts dynamic components. Host views are generated by the Angular compiler for every component which is specified in either bootstrap or entryComponent module. Now each host view is responsible for generating a component view when factory.createComponent is called. Host views are attached with DOM elements.

Example: In this example, for any host view to work, a view container that holds views must exist.  We have two view containers present here <app-example></app-example> and <ng-container></ng-container>.

Javascript

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

@Component({
  template: `
    <h1>Host View</h1>
    <h3>Dynamically Generated!</h3>
  `,
})
export class AnotherComponent {}

Javascript

import { AfterViewInit, Component, ViewChild,
         ViewContainerRef,
         ComponentFactoryResolver } from "@angular/core";
import { AnotherComponent } from "./another.component";

@Component({
  selector: "app-example",
  template: `
    <h1>Application Content</h1>
    <ng-container #container></ng-container>
    <h3>Application using host views</h3>`,
  entryComponents: [AnotherComponent],
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor(private resolve: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    const factory = this.resolve.resolveComponentFactory(AnotherComponent);
    this.ctr.createComponent(factory);
  }
}

Output:

3. Embedded Views: These types of views connect with other views with no added input. Basically, these views are created for view nodes specified in the ng-template. Unlike host views embedded views attach to other views.

The main difference between embedded and host views is that embedded views are particularly linked to a template whereas host views are linked to components.

Example: This example explains the basic use of Embedded Views in AngularJS.

Javascript

import { Component, AfterViewInit, ViewChild,
         ViewContainerRef,
         TemplateRef } from "@angular/core";

@Component({
  selector: "app-example",
  template: `
    <h1>Embedded View Example</h1>
    <ng-container #container></ng-container>

    <!-- embed view here -->
    <h3>This is an example of embedded view</h3>
    <ng-template #template>
      <h1>This view is linked with template</h1>
      <h3>Dynamically Generated!</h3>
    </ng-template>`,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("template", { read: TemplateRef }) tpl: TemplateRef<any>;
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor() {}

  ngAfterViewInit() {
    const view = this.tpl.createEmbeddedView(null);
    this.ctr.insert(view);
  }
}

Output:

TemplateUrl: It is a property in Angular Component Decorator. External Template uses templateUrl property to access the HTML file which is defined in a separate location, and the templateUrl does the work of taking the path of that file. Let’s understand templateUrl with an example.

Example: This example explains the basic use of the TemplateUrl in AngularJS

app.component.ts:

Javascript

@Component({
  selector: "email-list",
  templateUrl: "./email-list.component.html",
  providers: [EmailService],
})
export class EmailListComponent implements OnInit {
  title = "app";
}

app.component.html:

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Email List File</h2>
    <p>
        This is a HTML file used by external
        template and is accessed using
        templateUrl property
    </p>
</body>

</html>

Output:

Difference between Views & TamplateUrl:

Views	TemplateUrl
Anything that a user sees on the screen.	A property used by external templates.
Used for creating Single Page Applications.	Used to fetch the path of the external HTML file.
Used to set up multiple views.	Does not set up multiple views.
It doesn’t take file references.	It takes file references.