-1

Is there a way to place an icon inside a nb-option? I have readed the docs and can't find a way to do this. May be with ng-template?

1 Answers1

0

You can place image inside nb-option like below. Code also in stackblitz=>
HTML:

 <nb-layout>
          <nb-layout-column>
            <nb-select [(selected)]="selectedOption">
              <nb-option *ngFor="let o of options" [value]="o">
               <div>
                    <img style="width:50px;height:50px" src="https://i.ibb.co/sm8s569/2.jpg" alt="2" border="0">
                   {{ o.name }}
                </div>
              </nb-option>
            </nb-select>
    
          </nb-layout-column>
        </nb-layout>

TS:

export class AppComponent  {
  options = [
    { value: 1, name: '1' },
    { value: 2, name: '2' },
    { value: 3, name: '3' },
  ];

  selectedOption;

  constructor() {
    this.selectedOption = this.options[1];
  }
}

enter image description here

Srijon Chakraborty
  • 2,007
  • 2
  • 7
  • 20