Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Load HTML Content Via AJAX in Angular ListView component

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component, ViewChild } from '@angular/core';
import { Ajax } from '@syncfusion/ej2-base';

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

export class AppComponent {
  public listtemplate;
  public data =  [
    { text: 'Network & Internet', id: '0', description: 'Wi-Fi, mobile, data usage, hotspot' },
    { text: 'Connected devices', id: '1', description: 'Bluetooth, cast, NFC' },
    { text: 'Battery', id: '2', description: '18% -4h 12m left' },
    { text: 'Display', id: '3', description: 'Wallpaper, sleep, font size' },
    { text: 'Sound', id: '4', description: 'Volume, vibration, Do Not Disturb' },
    { text: 'Storage', id: '5', description: '52% used - 15.48 GB free' }
    ];
    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);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#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;
}
Previous
Next