Contents
- Prerequisites
- Implementation
Having trouble getting help?
Contact Support
Contact Support
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));