How to put html into title of elements within the completer list

[templth]

Hello,

I try to add some styles (bold) for a part of the title of elements in the completer list. For this, I created a custom CompleterDataclass for this.

export class CityCustomData extends Subject<CompleterItem[]> implements CompleterData {
    constructor(private http: HttpClient) {
        super();
    }
    public search(term: string): void {
        const params = new HttpParams()
          .set('featureClass', 'P')
          .set('username', 'oopet')
          .set('lang', 'fr')
          .set('maxRows', '10')
          .set('name_startsWith', term);
        this.http.get('http://api.geonames.org/searchJSON', { params })
            .map((res) => {
                const data = <any[]>res['geonames'];
                const matches: CompleterItem[] = data.map((elt: any) => this.convertToItem(elt));
                this.next(matches);
            })
            .subscribe();
    }

    public cancel() {
        // Handle cancel
    }

    public convertToItem(data: any): CompleterItem | null {
        if (!data) {
            return null;
        }

        return {
            title: `${data.name} - ${data.countryName}`,
            originalObject: data
        } as CompleterItem;
    }
}

Within the title field returned, I would want to have the country name in bold.

Is it something possibe? Do I use the right approach?

Thanks for your help! Thierry