Difference between views and templateUrl in AngularJS

Last Updated : 18 Jan, 2021

In this article, we will see some differences between Views and TemplateUrl in AngularJS.

Views: A view 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:

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 of view container is ViewContainerRef it represents a container where one or more views can be connected.

Example:

HTML

@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:

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 attach with DOM elements.

Example: Here 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>

HTML

import { Component } from '@angular/core'; 
  
@Component({ 
  template: ` 
    <h1>Host View</h1> 
    <h3>Dynamically Generated!</h3> 
  ` 
}) 
export class AnotherComponent {} 

HTML

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:

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 with other views.

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

Example:

HTML

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:

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

<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:

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 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

My Personal Notes

Related Articles

HTML

HTML

HTML

HTML

Javascript

HTML