Insert Images into Indexes in Angular

Background:

Some developers will want to display images next to the text inside of their MultiSelect controls. We can use ngtemplate to insert our own HTML into each element of the control.

Steps to Complete:

1. Use ngTemplate within MultiSelect markup to insert custom HTML into the control

Getting Started

Use ngTemplate within MultiSelect markup to insert custom HTML into the control

To insert HTML into the indexes, place an ngTemplate component between the MultiSelect markup. Then, inside the ngTemplate you can place your own HTML (in this case, an image) inside each index.

<ng-template wjItemTemplate let-item="item">
    <input tabindex="-1" type="checkbox"><img src="https://demos.wijmo.com/5/React/FlexGridIntro/FlexGridIntro/resources/{{item}}.png"><b>{{item}}</b>
</ng-template>

Here, you can see that we use the text of each element to go out and grab that country's flag and insert it next to the name within each index of the control.

You can find a live sample of this project here: https://stackblitz.com/edit/wijmo-knowledgebase-angular-input-images-in-control