Customize mdb-completer dropdown content

<mdb-completer [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">

</mdb-completer>

import { Component } from '@angular/core';

import { CompleterData } from 'ng-mdb-pro/pro/autocomplete';

import { CompleterService } from 'ng-mdb-pro/pro';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

public countries= [{

'name':'Afghanistan',

'code':'AF',

'flag':'./../assets/img/af.png'

}, {

'name':'Aland Islands',

'code':'AX',

'flag':''

}, {

'name':'Albania',

'code':'AL',

'flag':'./../assets/img/al.png'

}, {

'name':'Algeria',

'code':'DZ',

'flag':'./../assets/img/dz.png'

}];

protected searchStr: string;

protected dataService: CompleterData;

constructor(private completerService: CompleterService) {

this.dataService = completerService.local(this.countries, 'name', 'name').imageField('flag');

}

}

nedzeplin pro commented 7 years ago

Thanks Damian. Can that imageField also be an image that is hosted from a URL?

---

Damian Gemza staff commented 7 years ago

I don't think so. If you want to get some datas from remote server, you have to use .remote() method instead of local(), but feel free to test and let me know!

---