Skip to content
Related Articles

Related Articles

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:

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    @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);
        }
    }

    chevron_right

    
    

    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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    HTML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
      }
    }

    chevron_right

    
    

    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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
      }
    }

    chevron_right

    
    

    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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


app.component.html:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 arrow_drop_up
Recommended Articles
Page :