Load html content via ajax in Angular ListView component

22 Jan 20254 minutes to read

We can set external HTML page content as template for our ListView component by making use of AJAX call.

let ajax = new Ajax('./template.html', 'GET', false);
    ajax.onSuccess = (e)=>{
        this.listtemplate = e;
    };
    ajax.send();

In the below sample, we have rendered smartphone settings template from external HTML file.

app.component.ts

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('./template.html', 'GET', false);
    ajax.onSuccess = (e: any) => {
      this.listtemplate = e;
    };
    ajax.send();
  }
}

styles.css

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

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));