Load html content via AJAX in Angular ListView component

12 Sep 20254 minutes to read

The ListView component allows you to load external HTML content as a template using AJAX requests. This article demonstrates how to fetch and set HTML content as the template property for the ListView component.

Prerequisites

Import the required Ajax class from the Syncfusion package:

import { Ajax } from '@syncfusion/ej2-base';

Implementation

Here’s how to load external HTML content using AJAX and set it as the ListView template:

// Create AJAX instance with the template URL
let ajax = new Ajax('https://helpej2.syncfusion.com/angular/documentation/code-snippet/listview/ajax-cs1/template', 'GET', false);
ajax.onSuccess = (e) => {
    this.listtemplate = e;
};
ajax.send();

The following example demonstrates rendering a smart phone settings template loaded from an external HTML file:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component, ViewChild } from '@angular/core';
import { ListViewComponent } from '@syncfusion/ej2-angular-lists';
import { Ajax } from '@syncfusion/ej2-base';

@Component({
  imports: [
    ListViewModule
  ],
  standalone: true,
  selector: 'my-app',
  template: `
          <ejs-listview id='List' [dataSource]='data' [fields]='fields' showHeader='true' headerTitle='Settings' [template]="listtemplate">
        </ejs-listview>
        `
})

export class AppComponent {
  public listtemplate?: ListViewComponent;
  public data = [
    { name: 'Network & Internet', id: '0', description: 'Wi-Fi, mobile, data usage, hotspot' },
    { name: 'Connected devices', id: '1', description: 'Bluetooth, cast, NFC' },
    { name: 'Battery', id: '2', description: '18% -4h 12m left' },
    { name: 'Display', id: '3', description: 'Wallpaper, sleep, font size' },
    { name: 'Sound', id: '4', description: 'Volume, vibration, Do Not Disturb' },
    { name: 'Storage', id: '5', description: '52% used - 15.48 GB free' }
  ];
  public fields: Object = { text: 'name', id: 'id' };
  ngOnInit() {
    let ajax = new Ajax('https://helpej2.syncfusion.com/angular/documentation/code-snippet/listview/ajax-cs1/template', 'GET', false);
    ajax.onSuccess = (e: any) => {
      this.listtemplate = e;
    };
    ajax.send();
  }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';


#List {
    display: block;
    max-width: 300px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#List .e-list-header {
    background: rgb(2, 120, 215);
    color: white;
    font-size: 19px;
    font-weight: 500;
}

#List.e-listview .e-list-item {
    padding: 10px 16px;
    height: 61px;

}

#List .settings-container .name {
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    height: 20px;
}

#List .settings-container .description {
    line-height: 20px;
    height: 20px;
    font-size: 10px;
    font-style: italic;
    margin-top: -2px;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));