import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2>Basic DataList</h2>
<eui-datalist style="width:550px;height:250px"
[data]="data"
[(selection)]="selection"
selectionMode="single">
<ng-template euiItemTemplate let-row>
<div class="product f-row">
<img src="https://www.jeasyui.com/tutorial/datagrid/images/{{row.itemid}}.png">
<div class="detail">
<p>{{row.itemid}} - {{row.name}}</p>
<p>{{row.attr}}</p>
<p>List Price: {{row.listprice}}</p>
</div>
</div>
</ng-template>
</eui-datalist>
<p *ngIf="selection">You selected: {{selection.name}}</p>
`,
styles: [`
.product .detail{
align-self: center;
}
.product img{
height: 100px;
padding: 10px;
}
.product p{
margin: 0;
padding: 6px 0;
}
`]
})
export class AppComponent {
selection = null;
data = [
{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-2"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-3"},
{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-4"},
{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-5"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-6"},
{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-7"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-8"},
{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-9"},
{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-10"}
];
}