Difference between views and templateUrl in AngularJS

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:

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

   

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

   

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

app.component.html:

Output: