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);
#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;
}