Load html content via ajax in Angular Listview component

20 Sep 20223 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.

import { Component, ViewChild } from '@angular/core';
import { Ajax } from '@syncfusion/ej2-base';

@Component({
    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;
  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)=>{
          this.listtemplate = e;
        };
        ajax.send();
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ListViewModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);